export let samplesList : any =[{"name":"Data Grid","directory":"grid","category":"Grids","ftName":"datagrid","samples":[{"url":"grid-overview","name":"Overview","category":"Data Grid","description":"This demo for Essential JS 2 grid component is an overview of how to display and manipulate large data with configuration options.","api":{"Grid":["dataSource","enableVirtualization","allowFiltering","allowSorting","allowSelection","selectionSettings","height","columns","dataBound"]},"sourceFiles":[{"displayName":"grid-overview.vue","path":"src/grid/grid-overview.vue"},{"displayName":"grid-overview.css","path":"styles/Grid/style.css"}],"uid":"00000","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"default","name":"Default Functionalities","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows the default rendering of the grid component with minimum configuration.","api":{"Grid":["columns","dataSource"]},"uid":"00001","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"grouping","name":"Grouping","category":"Data Grid","description":"This demo for Essential JS 2 grid component demonstrates the grouping feature of the grid component. The grid component has options to group records based on columns.","api":{"Grid":["columns","dataSource","allowGrouping","allowSorting","allowPaging"]},"uid":"00002","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"grid-lines","name":"Grid Lines","category":"Data Grid","description":"This demo for Essential JS 2 grid component demonstrates the visibility of the grid lines that separate the rows and columns.","api":{"Grid":["columns","dataSource","gridLines"]},"uid":"00003","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"hierarchy-grid","name":"Hierarchy Grid","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows the hierarchical binding feature that helps to build multilevel parent-child relationships.","api":{"Grid":["columns","dataSource"]},"uid":"00004","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"clipboard","name":"Clipboard","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows the copy-to-clipboard functionality.","api":{"Grid":["columns","dataSource"]},"uid":"00005","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"context-menu","name":"Context Menu","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows the usage of the context menu in grid component. Grid has an option to show the context menu when it’s right-clicked on.","api":{"Grid":["columns","dataSource"]},"uid":"00006","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"master-details","name":"Master/Detail","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows usage of the master/detail in which the details of a Master grid record, is viewed in a separate grid(Detail grid) by clicking the particular row.","api":{"Grid":["columns","dataSource"]},"uid":"00007","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"paging","name":"Paging","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows how you can display the contents of the grid in page segments using the paging feature.","api":{"Grid":["columns","dataSource"]},"uid":"00008","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"sorting","name":"Sorting","category":"Data Grid","description":"This demo for Essential JS 2 grid component shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.","api":{"Grid":["columns","dataSource","allowSorting"]},"uid":"00009","order":0,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"scrolling","name":"Default Scrolling","category":"Scrolling","description":"This demo for Essential JS 2 grid component shows the usage of the horizontal and vertical scrollbars to view grid content that exceeds the grid area.","api":{"Grid":["columns","dataSource"]},"uid":"000010","order":1,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"virtual-scrolling","name":"Virtual Scrolling","category":"Scrolling","description":"This demo demonstrates how to use Essential JS 2 grid to show a large data view without performance degradation by rendering only the required rows and columns.","api":{"Grid":["columns","dataSource","enableVirtualization","enableColumnVirtualization"]},"sourceFiles":[{"displayName":"virtual-scrolling.vue","path":"src/grid/virtual-scrolling.vue"},{"displayName":"virtual-scrolling.css","path":"styles/Grid/virtual-scrolling.css"}],"uid":"000011","order":1,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"local-data","name":"Local Data","category":"Data Binding","description":"This demo for Essential JS 2 grid component shows how to bind with a local data source.","api":{"Grid":["columns","dataSource"]},"uid":"000012","order":2,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"remote-data","name":"Remote Data","category":"Data Binding","description":"This demo for Essential JS 2 grid component shows how to consume data from a remote data service.","api":{"Grid":["columns","dataSource"]},"uid":"000013","order":2,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"custom-binding","name":"Custom Binding","category":"Data Binding","description":"This demo for Essential JS 2 grid component shows how to bind data using custom data binding.","api":{"Grid":["columns","dataSource"]},"uid":"000014","order":2,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"auto-wrap","name":"AutoWrap Column cells","category":"Columns","description":"This demo for Essential JS 2 grid component shows how the grid cell content is autowrapped to show large cell content.","api":{"Grid":["columns","dataSource"]},"uid":"000015","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"show-hide","name":"Show or Hide Column","category":"Columns","description":"This demo for Essential JS 2 grid component demonstrates the dynamic show and hide columns feature.","api":{"Grid":["columns","dataSource"]},"uid":"000016","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"column-template","name":"Column Template","category":"Columns","description":"This demo for Essential JS 2 grid component shows the usage of template columns in grid.","api":{"Grid":["columns","dataSource"]},"uid":"000017","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"header-template","name":"Header Template","category":"Columns","description":"This demo for Essential JS 2 grid component shows the usage of the header template feature.","api":{"Grid":["columns","dataSource"]},"sourceFiles":[{"displayName":"header-template.vue","path":"src/grid/header-template.vue"},{"displayName":"header-template.css","path":"styles/Grid/header-template.css"}],"uid":"000018","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"stacked-header","name":"Stacked Header","category":"Columns","description":"This demo for Essential JS 2 grid component shows the usage of the stacked header feature.","api":{"Grid":["columns","dataSource"]},"uid":"000019","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"reorder","name":"Reorder","category":"Columns","description":"This demo for Essential JS 2 grid component shows the reordering columns features.","api":{"Grid":["columns","dataSource","allowReordering"]},"uid":"000020","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"column-chooser","name":"Column Chooser","category":"Columns","description":"This demo for Essential JS 2 grid component shows how the column chooser feature can be used to show or hide columns dynamically.","api":{"Grid":["columns","dataSource","showColumnChooser"]},"uid":"000021","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"column-resize","name":"Column Resize","category":"Columns","description":"This demo for Essential JS 2 grid component shows how the column resizing feature can be used to change width dynamically.","api":{"Grid":["columns","dataSource","allowResizing"]},"uid":"000022","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"column-spanning","name":"Column Spanning","category":"Columns","description":"This demo for Essential JS 2 grid component shows the usage of the column spanning feature.","api":{"Grid":["columns","dataSource","allowResizing"]},"uid":"000023","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"frozen","name":"Frozen Rows and Columns","category":"Columns","description":"This demo for Essential JS 2 grid component shows how the rows and columns can be frozen or pinned.","api":{"Grid":["columns","dataSource","allowResizing"]},"uid":"000024","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"column-menu","name":"Column Menu","category":"Columns","description":"This demo for Essential JS 2 grid component shows the usage of the various column functionalities of the column menu feature.","api":{"Grid":["columns","dataSource","allowResizing"]},"uid":"000025","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"foreign-key","name":"Foreign Key Column","category":"Columns","description":"This demo for Essential JS 2 grid component demonstrates the usage of a foreign key column and performing actions such as filtering, sorting, and editing in the foreign key column.","api":{"Grid":["columns","dataSource"]},"uid":"000026","order":3,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"row-template","name":"Row Template","category":"Rows","description":"This demo for Essential JS 2 grid component shows the usage of the row template feature.","api":{"Grid":["columns","dataSource","rowTemplate"]},"sourceFiles":[{"displayName":"row-template.vue","path":"src/grid/row-template.vue"},{"displayName":"row-template.css","path":"styles/Grid/row-template.css"}],"uid":"000027","order":4,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"detail-template","name":"Detail Template","category":"Rows","description":"This demo for Essential JS 2 grid component shows the usage of the detail template feature.","api":{"Grid":["columns","dataSource","rowTemplate"]},"sourceFiles":[{"displayName":"detail-template.vue","path":"src/grid/detail-template.vue"},{"displayName":"detail-template.css","path":"styles/Grid/detail-template.css"}],"uid":"000028","order":4,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"row-height","name":"Row Height","category":"Rows","description":"This demo for Essential JS 2 grid component shows the row height feature.","api":{"Grid":["columns","dataSource"]},"sourceFiles":[{"displayName":"row-height.vue","path":"src/grid/row-height.vue"},{"displayName":"row-height.css","path":"styles/Grid/row-height.css"}],"uid":"000029","order":4,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"row-drag-and-drop","name":"Row Drag and Drop","category":"Rows","description":"This demo for Essential JS 2 grid component demonstrates how the rows can be dragged between grids using the row drag-and-drop feature.","api":{"Grid":["columns","dataSource"]},"uid":"000030","order":4,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"drag-and-drop-within-grid","name":"Row Drag And Drop Within Grid","category":"Rows","description":"This demo for Essential JS 2 grid component demonstrates how the rows can be dragged within a grids using the row drag-and-drop feature.","api":{"Grid":["columns","dataSource","allowRowDragAndDrop"]},"uid":"000031","order":4,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"row-spanning","name":"Row Spanning","category":"Rows","description":"This demo for Essential JS 2 grid control shows the usage of the row and column spanning feature.","api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"]},"uid":"000032","order":4,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"filtering","name":"Default Filtering","category":"Filtering","description":"This demo for Essential JS 2 grid component shows how to place a filter bar row in the header to filter grid rows.","api":{"Grid":["columns","dataSource","allowFiltering"]},"sourceFiles":[{"displayName":"filtering.vue","path":"src/grid/filtering.vue"},{"displayName":"filtering.css","path":"styles/Grid/filtering.css"}],"uid":"000033","order":5,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"filter-menu","name":"Filter Menu","category":"Filtering","description":"This demo for Essential JS 2 grid component demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.","api":{"Grid":["columns","dataSource","allowFiltering"]},"sourceFiles":[{"displayName":"filter-menu.vue","path":"src/grid/filter-menu.vue"},{"displayName":"filter-menu.css","path":"styles/Grid/filter-menu.css"}],"uid":"000034","order":5,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"searching","name":"Search","category":"Filtering","description":"This demo for Essential JS 2 grid component shows the content searching feature.","api":{"Grid":["columns","dataSource","toolbar"]},"uid":"000035","order":5,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"selection","name":"Default Selection","category":"Selection","description":"This demo for Essential JS 2 grid component shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.","api":{"Grid":["columns","dataSource","allowSelection","selectionSettings"]},"uid":"000036","order":6,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"selection-api","name":"Selection API","category":"Selection","description":"This demo for Essential JS 2 grid component shows how to perform selection programmatically.","api":{"Grid":["columns","dataSource","allowSelection","selectionSettings"]},"uid":"000037","order":6,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"checkbox-selection","name":"Checkbox Selection","category":"Selection","description":"This demo for Essential JS 2 grid component shows how the check box selection feature can be used to select grid rows.","api":{"Grid":["columns","dataSource","allowSelection","selectionSettings"]},"uid":"000038","order":6,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"aggregate","name":"Default Aggregate","category":"Aggregate","description":"This demo for Essential JS 2 grid component shows how the row values can be aggregated and shown in a column footer.","api":{"Grid":["columns","dataSource"]},"uid":"000039","order":7,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"group-caption-aggregate","name":"Group and Caption Aggregate","category":"Aggregate","description":"This demo for Essential JS 2 grid component shows how the row values can be aggregated for each group of items and shown in a group caption and footer.","api":{"Grid":["columns","dataSource"]},"uid":"000040","order":7,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"reactive-aggregate","name":"Reactive Aggregate","category":"Aggregate","description":"This demo for Essential JS 2 grid component shows how aggregate values are updated while the row is edited in batch edit mode.","api":{"Grid":["columns","dataSource","editingSettings","toolbar"]},"uid":"000041","order":7,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"inline-editing","name":"Inline Editing","category":"Editing","description":"This demo for Essential JS 2 grid component shows the inline editing operation.","api":{"Grid":["columns","dataSource"]},"uid":"000042","order":8,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"dialog-editing","name":"Dialog Editing","category":"Editing","description":"This demo for Essential JS 2 grid component shows how to edit grid rows using the Essential JS 2 dialog component.","api":{"Grid":["columns","dataSource"]},"uid":"000043","order":8,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"dialog-template","name":"Dialog Template","category":"Editing","description":"This demo for Essential JS 2 grid component shows how to edit the grid rows using Essential JS 2 dialog-template.","api":{"Grid":["columns","dataSource","editSettings"]},"uid":"000044","order":8,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"batch-editing","name":"Batch Editing","category":"Editing","description":"This demo for Essential JS 2 grid component shows how to perform bulk changes to the grid content using batch edit mode.","api":{"Grid":["columns","dataSource"]},"uid":"000045","order":8,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"command-column","name":"Command Column","category":"Editing","description":"This demo for Essential JS 2 grid component shows how to edit and delete records using a command column.","api":{"Grid":["columns","dataSource"]},"uid":"000046","order":8,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"export","name":"Default Exporting","category":"Exporting","description":"This demo for Essential JS 2 grid component shows the client-side exporting of grid content to Excel, PDF, and CSV formats.","api":{"Grid":["columns","dataSource","allowPdfExport","allowExcelExport"]},"uid":"000047","order":9,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"advance-export","name":"Advanced Exporting","category":"Exporting","description":"This demo for Essential JS 2 grid component demonstrates how exporting can be customized to add headers and footers in exported documents.","api":{"Grid":["columns","dataSource","allowPdfExport","allowExcelExport"]},"uid":"000048","order":9,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"master-details-export","name":"Hierarchy Exporting","category":"Exporting","description":"This demo for Essential JS 2 grid component shows how to export the hierarchy grid content.","api":{"Grid":["columns","dataSource","allowPdfExport","allowExcelExport","childGrid"]},"uid":"000049","order":9,"component":"Data Grid","dir":"grid","parentId":"00"},{"url":"print","name":"Print","category":"Exporting","description":"This demo for Essential JS 2 grid component shows how to print the grid content.","api":{"Grid":["columns","dataSource","childGrid","toolbar"]},"uid":"000050","order":9,"component":"Data Grid","dir":"grid","parentId":"00"}],"order":0,"uid":"00"},{"name":"Tree Grid","directory":"tree-grid","category":"Grids","type":"update","ftName":"treegrid","samples":[{"url":"overview","name":"OverView","category":"Tree Grid","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","columns"]},"description":"This demo for Essential JS 2 treegrid component is an overview of how to display and manipulate large data with configuration options.","uid":"00110","order":0,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"default","name":"Default Functionalities","category":"Tree Grid","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","columns"]},"description":"This example shows how the Syncfusion Essential JS2 TreeGrid looks with its default configuration.","uid":"00111","order":0,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"localdata","name":"Local Data","category":"Data Binding","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","columns"]},"description":"This example shows the binding of an array of list objects in the Syncfusion Essential JS2 TreeGrid control.","uid":"00112","order":1,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"remotedata","name":"Remote Data","category":"Data Binding","api":{"TreeGrid":["dataSource","allowPaging","columns","treeColumnIndex","hasChildMapping","parentIdMapping","idMapping","height"]},"description":"This example shows the binding of remote services by using the DataManager in the Syncfusion Essential JS2 TreeGrid.","uid":"00113","order":1,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"selfreference","name":"Self Reference","category":"Data Binding","api":{"TreeGrid":["dataSource","allowPaging","columns","treeColumnIndex","idMapping","parentIdMapping"]},"description":"This example illustrates binding self-referential flat data with parent ID to a Syncfusion Essential JS2 TreeGrid control.","uid":"00114","order":1,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"columnformatting","name":"Column Formatting","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex","pageSettings"]},"description":"This demo explains how to display the content of TreeGrid columns based on the specified format in Syncfusion Essential JS2 TreeGrid.","uid":"00115","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"columntemplate","name":"Column Template","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","width","height","columns","rowHeight"]},"description":"This demo explains how to define template columns in Syncfusion Essential JS2 TreeGrid control.","sourceFiles":[{"displayName":"columntemplate.vue","path":"src/tree-grid/columntemplate.vue"},{"displayName":"template1.vue","path":"src/tree-grid/template1.vue"},{"displayName":"template2.vue","path":"src/tree-grid/template2.vue"},{"displayName":"template3.vue","path":"src/tree-grid/template3.vue"}],"uid":"00116","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"reorder","name":"Reorder","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowReordering","actionComplete","columns","allowPaging"]},"description":"This demo explains how to reorder the columns of treegrid by simple drag and drop of columns using Syncfusion Essential JS2 TreeGrid control.","uid":"00117","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"resizing","name":"Resize","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowResizing","actionComplete","columns","allowPaging"]},"description":"This demo explains how to resize the width of the treegrid columns in Syncfusion Essential JS2 TreeGrid control.","uid":"00118","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"columnmenu","name":"Column Menu","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns"]},"description":"This demo explains the default functionalities of the Column Menu in Syncfusion Essential JS2 TreeGrid control.","uid":"00119","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"cellalignment","name":"Cell Alignment","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex"]},"description":"This demo explains how to align the content inside the cells of treegrid columns and headers in Syncfusion Essential JS2 TreeGrid control.","uid":"001110","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"autowrap","name":"AutoWrap Column Cells","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","allowTextWrap","columns","pageSettings"]},"description":"This demo explains how to wrap the content of columns within the specified width of treegrid columns in Syncfusion Essential JS2 TreeGrid control.","uid":"001111","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"showhide","name":"Show or Hide Column","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex"]},"description":"This demo explains how to hide or show the columns of treegrid dynamically using Syncfusion Essential JS2 TreeGrid methods.","uid":"001112","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"headertemplate","name":"Header Template","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","columns","height"]},"description":"This demo explains how to customize column headers to show additional HTML elements, such as icons, images, etc. in Syncfusion Essential JS2 TreeGrid control.","uid":"001113","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"stackedheader","name":"Stacked Header","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","pageSettings","columns"]},"description":"This demo explains how to provide a common header for the group of columns in Syncfusion Essential JS2 TreeGrid control.","uid":"001114","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"rowhover","name":"Row Hover","category":"Rows","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","columns","enableHover","height"]},"description":"This demo explains how the treegrid row color is changed while move the mouse over a row in Syncfusion Essential JS2 TreeGrid content.","uid":"001115","order":3,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"rowheight","name":"Row Height","category":"Rows","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","rowHeight","allowPaging","toolbarClick","columns","toolbar"]},"description":"This demo explains the way of customizing the row height of Syncfusion Essential JS2 TreeGrid control.","uid":"001116","order":3,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"row-template","name":"Row Template","category":"Rows","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","rowTemplate"]},"description":"This demo for Essential JS 2 TreeGrid control shows the usage of the row template feature. We have rendered each TreeGrid row using template.","type":"new","uid":"001117","order":3,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"detail-template","name":"Detail Template","category":"Rows","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","detailTemplate"]},"description":"This demo shows TreeGrid with detail template feature and also each row contains detailed information about a row","type":"new","uid":"001118","order":3,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"inline-editing","name":"Inline Editing","category":"Editing","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","editSettings","toolbar","columns"]},"description":"This example shows how to add and edit row or cell inline on the Syncfusion Essential JS2 TreeGrid control.","uid":"001119","order":4,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"dialogediting","name":"Dialog Editing","category":"Editing","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","editSettings","toolbar","columns","height"]},"description":"This demo explains how to edit a treegrid record in the Dialog mode using Syncfusion Essential JS2 TreeGrid control.","uid":"001120","order":4,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"lock-row","name":"Lock Row","category":"Editing","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","editSettings","toolbar","columns","allowPaging","pageSettings","rowDataBound","beginEdit","enableHover"]},"description":"This demo explains how to disable editing for specific rows dynamically in Syncfusion Essential JS2 TreeGrid control.","uid":"001121","order":4,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"cell-edittype","name":"Cell Edit Type","category":"Editing","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","editSettings","toolbar","columns","height"]},"description":"This demo explains how to set different edit types and how to define edit params for the treegrid columns in Syncfusion Essential JS2 TreeGrid control.","uid":"001122","order":4,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"commandcolumn","name":"Command Column","category":"Editing","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","editSettings","columns","height"]},"description":"This demo explains how to include CRUD action buttons as one of the columns in Syncfusion Essential JS2 TreeGrid control.","uid":"001123","order":4,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"edittemplate","name":"Edit Template","category":"Editing","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","editSettings","toolbar","columns","height"]},"description":"This demo explains how create a custom editor control for the treegrid cells when a row is edited in Syncfusion Essential JS2 TreeGrid.","uid":"001124","order":4,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"sorting","name":"Multi Sorting","category":"Sorting","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","pageSettings","columns","allowSorting","actionComplete","sortSettings"]},"description":"This demo demonstrates to sort multiple columns of treegrid by hold the CTRL key and click on the column headers of Syncfusion Essential JS2 TreeGrid control.","uid":"001125","order":5,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"sorting-api","name":"Sorting API","category":"Sorting","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","allowSorting","columns","pageSettings"]},"description":"This demo explains how to sort columns dynamically using methods of Syncfusion Essential JS2 TreeGrid control.","uid":"001126","order":5,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"filtering","name":"Default Filtering","category":"Filtering","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","allowFiltering","filterSettings","treeColumnIndex"]},"description":"This demo explains the default functionalities of filtering and how to define the template for filter bar in Syncfusion Essential JS2 TreeGrid.","uid":"001127","order":6,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"filtermenu","name":"Menu Filter","category":"Filtering","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","allowFiltering","treeColumnIndex","filterSettings"]},"description":"This demo explains how to filter the content using menu filter type of Syncfusion Essential JS2 TreeGrid control.","uid":"001128","order":6,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"search","name":"Search","category":"Filtering","api":{"TreeGrid":["dataSource","allowPaging","pageSettings","columns","childMapping","treeColumnIndex","toolbar"]},"description":"This demo explains how to search the text entered in the search bar in Syncfusion Essential JS2 TreeGrid content.","uid":"001129","order":6,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"paging","name":"Default Paging","category":"Paging","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","pageSettings","treeColumnIndex"]},"description":"This demo explains how to display the records in paginated view in Syncfusion Essential JS2 TreeGrid control.","uid":"001130","order":7,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"paging-api","name":"Paging API","category":"Paging","api":{"Grid":["dataSource","allowPaging","columns","treeColumnIndex","childMapping"]},"description":"This demo explains how to customize a pager using the APIs that are relevant to paging of Syncfusion Essential JS2 TreeGrid control.","uid":"001131","order":7,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"default-scrolling","name":"Default Scrolling","category":"Scrolling","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height"]},"description":"This demo demonstrates how to use Essential JS 2 TreeGrid to show a large data view without performance degradation by rendering only the required rows.","type":"new","uid":"001132","order":8,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"virtual-scrolling","name":"virtual Scrolling","category":"Scrolling","api":{"TreeGrid":["dataSource","enableVirtualization","height","dataBound"]},"description":"This demo for Essential JS 2 TreeGrid control shows the usage of the horizontal and vertical scrollbars to view TreeGrid content that exceeds the TreeGrid area.","type":"new","uid":"001133","order":8,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"selection","name":"Default Selection","category":"Selection","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","allowSelection","selectionSettings","treeColumnIndex"]},"description":"This demo explains the customization of selection mode and toggle selection of Syncfusion Essential JS2 TreeGrid control.","uid":"001134","order":9,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"selection-api","name":"Selection API","category":"Selection","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","allowSelection","selectionSettings","treeColumnIndex"]},"description":"This demo explains how to select and clear multiple rows using methods of Syncfusion Essential JS2 TreeGrid control.","uid":"001135","order":9,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"checkbox-selection","name":"Checkbox Selection","category":"Selection","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex"]},"description":"This demo explains how the check box selection feature can be used to select treegrid rows in Essential TypeScript TreeGrid control.","uid":"001136","order":9,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"checkbox-column","name":"Checkbox Column","category":"Columns","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex"]},"description":"This demo explains how the hierarchy selection between the records using column checkboxes in Essential TypeScript TreeGrid control.","uid":"001137","order":2,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"aggregate","name":"Default Aggregate","category":"Aggregates","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","height","columns","aggregates"]},"description":"This demo explains how to display the summary values such as average, minimum, etc., for the columns in Syncfusion Essential JS2 TreeGrid control.","uid":"001138","order":10,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"custom-aggregate","name":"Custom Aggregate","category":"Aggregates","api":{"TreeGrid":["dataSource","width","childMapping","treeColumnIndex","height","columns","aggregates"]},"description":"This demo explains how to display the custom aggregate for the columns in Syncfusion Essential JS2 TreeGrid control.","uid":"001139","order":10,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"contextmenu","name":"Default Context Menu","category":"Context Menu","description":"This demo explains the usage of context menu and the default context menu items in Syncfusion Essential JS2 TreeGrid control.","api":{"TreeGrid":["dataSource","allowPaging","columns","contextMenu","hasChildMapping","parentIdMapping"]},"uid":"001140","order":11,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"custom-contextmenu","name":"Custom Context Menu","category":"Context Menu","description":"This demo explains the usage of custom context menu items in Syncfusion Essential JS2 TreeGrid control.","api":{"TreeGrid":["dataSource","allowPaging","columns","hasChildMapping","contextMenuItems","parentIdMapping"]},"uid":"001141","order":11,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"export","name":"Default Exporting","category":"Exporting","api":{"TreeGrid":["dataSource","columns","toolbar","allowExcelExport","allowPdfExport","treeColumnIndex","toolbarClick","childMapping","height"]},"description":"This demo explains how to export the treegrid content to Excel, PDF, and CSV documents using the Syncfusion Essential JS2 TreeGrid control.","uid":"001142","order":12,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"print","name":"Print","category":"Exporting","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","allowPaging","columns","toolbar"]},"description":"This demo explains how to print the records of the treegrid using the Print feature of Syncfusion Essential JS2 TreeGrid control.","uid":"001143","order":12,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"conditionalformatting","name":"Conditional Formatting","category":"Miscellaneous","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","columns","height","queryCellInfo"]},"description":"This demo explains how to apply styles to specific cells based on certain conditions in Syncfusion Essential JS2 TreeGrid control.","uid":"001144","order":13,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"toolbar-template","name":"Toolbar Template","category":"Miscellaneous","api":{"TreeGrid":["dataSource","toolbar","toolbarClick","allowFiltering","childMapping","height","treeColumnIndex","filterSettings","columns"]},"description":"This demo explains how to render custom template elements in a toolbar by which any custom operation can be performed in Syncfusion Essential JS2 TreeGrid.","uid":"001145","order":13,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"events","name":"Events","category":"Miscellaneous","api":{"TreeGrid":["dataSource","allowPaging","childMapping","treeColumnIndex","load","created","actionBegin","actionComplete","allowReordering","allowSorting","dataBound","rowSelecting","rowSelected","columnDragStart","columnDrag","columnDrop","columns","pageSettings"]},"description":"This demo explains the basic functionalities of the events that are available in the Syncfusion Essential JS2 TreeGrid control.","uid":"001146","order":13,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"keyboard","name":"KeyBoard Interaction","category":"Miscellaneous","api":{"TreeGrid":["dataSource","childMapping","treeColumnIndex","columns","pageSettings"]},"description":"This demo explains the key combinations used to perform corresponding treegrid actions in Syncfusion Essential JS2 TreeGrid control.","uid":"001147","order":13,"component":"Tree Grid","dir":"tree-grid","parentId":"01"},{"url":"gridlines","name":"Grid Lines","category":"Miscellaneous","api":{"TreeGrid":["dataSource","childMapping","allowPaging","columns","treeColumnIndex"]},"description":"This demo explains how to customize the grid lines in treegrid using Syncfusion Essential JS2 TreeGrid control.","uid":"001148","order":13,"component":"Tree Grid","dir":"tree-grid","parentId":"01"}],"order":0,"uid":"01"},{"name":"Pivot Table","directory":"pivot-table","category":"Grids","ftName":"pivot-table","type":"update","samples":[{"url":"default","name":"Default Functionalities","category":"Pivot Table","description":"This demo for Essential JS2 Pivot Table control shows the basic rendering of the pivot table with minimum configuration","api":{},"uid":"00220","order":0,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"local","name":"Local Data","category":"Data Binding","description":"This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with local JSON data","api":{},"uid":"00221","order":1,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"remote","name":"Remote Data","category":"Data Binding","description":"This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with remote data or service data","api":{},"uid":"00222","order":1,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"pivot-chart","name":"Pivot Chart","category":"Integration","type":"update","description":"This demo for Essential JS2 Pivot Table control demonstrate integration of pivot table data into a simple chart component","api":{},"uid":"00223","order":2,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"external-binding","name":"External Binding","category":"Integration","description":"This demo for Essential JS2 Pivot Table control demonstrate the rendering of chart component with cell selection option.","api":{},"uid":"00224","order":2,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"field-list","name":"Field List","category":"User Interaction","description":"This demo for Essential JS2 Pivot Table control demonstrate the field list feature of the pivot table","api":{},"uid":"00225","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"grouping-bar","name":"Grouping Bar","category":"User Interaction","description":"This demo for Essential JS2 Pivot Table control demonstrate the grouping bar feature of the pivot table","api":{},"uid":"00226","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"conditional-formatting","name":"Conditional Formatting","category":"User Interaction","description":"This demo for Essential JS2 Pivot Table control demonstrate formatting the appearance of the pivot table cells with values based on the applied conditions","api":{},"uid":"00227","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"selection","name":"Selection","category":"User Interaction","description":"This demo for Essential JS2 Pivot Table control demonstrate the cell selection feature of the pivot table","api":{},"uid":"00228","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"summary-customization","name":"Show/Hide Totals","category":"User Interaction","api":{},"description":"This demo for Essential JS2 Pivot Table control demonstrate the summary customization feature of the pivot table","uid":"00229","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"grouping","name":"Grouping","category":"User Interaction","api":{},"description":"This demo for Essential JS2 Pivot Table control demonstrate the grouping feature for date and number fields","uid":"002210","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"toolbar","name":"Toolbar","category":"User Interaction","api":{},"description":"This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature of the pivot table","uid":"002211","order":3,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"calculated-field","name":"Calculated Field","category":"Formula","description":"This demo for Essential JS2 Pivot Table control shows calculated field, and it allows users to add calculated items","api":{},"uid":"002212","order":4,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"aggregation","name":"Aggregation","category":"Formula","description":"This demo for Essential JS2 Pivot Table control shows different types of aggregation for value fields","api":{},"uid":"002213","order":4,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"sorting","name":"Default Sorting","category":"Sorting","description":"This demo for Essential JS2 Pivot Table control shows ordering(sorting) of fields either in ascending or descending order","api":{},"uid":"002214","order":5,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"value-sorting","name":"Value Sorting","category":"Sorting","description":"This demo for Essential JS2 Pivot Table control shows sorting values on column or row wise in ascending or descending order","api":{},"uid":"002215","order":5,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"filtering","name":"Default Filtering","category":"Filtering","description":"This demo for Essential JS2 Pivot Table control demonstrate member filtering of field headers either by including or excluding them","api":{},"uid":"002216","order":6,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"label-filtering","name":"Label Filtering","category":"Filtering","description":"This demo for Essential JS2 Pivot Table control demonstrate label filtering of field headers either by including or excluding them","api":{},"uid":"002217","order":6,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"value-filtering","name":"Value Filtering","category":"Filtering","description":"This demo for Essential JS2 Pivot Table control demonstrate the filtering of field headers based on the grand total (value based)","api":{},"uid":"002218","order":6,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"virtual-scrolling","name":"Virtual Scrolling","category":"Scrolling","description":"This demo for Essential JS2 Pivot Table control shows virtual scrolling option available vertically and horizontally to load large records with ease","api":{},"uid":"002219","order":7,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"cell-template","name":"Cell Template","category":"Customization","description":"This demo for Essential JS2 Pivot Table control demonstrate cell template option on cells of the pivot table","api":{},"uid":"002220","order":8,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"drill-through","name":"Drill Through","category":"Miscellaneous","description":"This demo for Essential JS2 Pivot Table control shows the raw items of any value cells in pivot table","api":{},"uid":"002221","order":9,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"editing","name":"Editing","category":"Miscellaneous","description":"This demo for Essential JS2 Pivot Table control allows to edit, add and delete the value cells in pivot table","api":{},"uid":"002222","order":9,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"hyper-link","name":"Hyperlink","category":"Miscellaneous","description":"This demo for Essential JS2 Pivot Table control shows hyperlink option on cells of the pivot table","api":{},"uid":"002223","order":9,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"defer-update","name":"Defer Layout Update","category":"Miscellaneous","api":{},"description":"This demo for Essential JS2 Pivot Table control demonstrate defer layout update feature of the pivot table","uid":"002224","order":9,"component":"Pivot Table","dir":"pivot-table","parentId":"02"},{"url":"exporting","name":"Export","category":"Miscellaneous","description":"This demo for Essential JS2 Pivot Table control demonstrate client-side exporting of the pivot table to Excel, CSV and PDF formats","api":{},"uid":"002225","order":9,"component":"Pivot Table","dir":"pivot-table","parentId":"02"}],"order":0,"uid":"02"},{"name":"Chart","directory":"chart","category":"Data Visualization","type":"update","ftName":"chart","samples":[{"url":"line","name":"Line","category":"Line Charts","description":"This demo for Essential JS2 Chart control shows how to render the line series.","sourceFiles":[{"displayName":"line.vue","path":"./src/chart/line.vue"}],"uid":"00330","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"spline","name":"Spline","description":"This demo for Essential JS2 Chart control shows how to render the spline series.","category":"Line Charts","sourceFiles":[{"displayName":"spline.vue","path":"./src/chart/spline.vue"}],"uid":"00331","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"step-line","name":"Step Line","description":"This demo for Essential JS2 Chart control shows how to render the step line series.","category":"Line Charts","sourceFiles":[{"displayName":"step-line.vue","path":"./src/chart/step-line.vue"}],"uid":"00332","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"dashed-line","name":"Dashed Line","description":"This demo for Essential JS2 Chart control shows how to render the dashed line series.","category":"Line Charts","sourceFiles":[{"displayName":"dashed-line.vue","path":"./src/chart/dashed-line.vue"}],"uid":"00333","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"spline-inversed","name":"Inversed Spline","description":"This demo for Essential JS2 Chart control shows how to render the inversed spline series.","category":"Line Charts","sourceFiles":[{"displayName":"spline-inversed.vue","path":"./src/chart/spline-inversed.vue"}],"uid":"00334","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"line-segments","name":"Line Zone","description":"This demo for Essential JS2 Chart control shows how to render and configure the points in a particular range using MultiColoredLine series.","category":"Line Charts","sourceFiles":[{"displayName":"line-segments.vue","path":"./src/chart/line-segments.vue"}],"uid":"00335","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"line-multi-color","name":"Multi Colored Line","description":"This demo for Essential JS2 Chart control shows how to render the multi colored line series.","category":"Line Charts","sourceFiles":[{"displayName":"line-multi-color.vue","path":"./src/chart/line-multi-color.vue"}],"uid":"00336","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-line","name":"Stacked Line","description":"This demo for Essential JS2 Chart control shows how to render the stacked line.","category":"Line Charts","sourceFiles":[{"displayName":"stacked-line.vue","path":"./src/chart/stacked-line.vue"}],"uid":"00337","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-line-100","name":"100% Stacked Line","description":"This demo for Essential JS2 Chart control shows how to render the 100% stacked line.","category":"Line Charts","sourceFiles":[{"displayName":"stacked-line-100.vue","path":"./src/chart/stacked-line-100.vue"}],"uid":"00338","order":0,"component":"Chart","dir":"chart","parentId":"03"},{"url":"area","name":"Area","description":"This demo for Essential JS2 Chart control shows how to render the area series.","category":"Area Charts","sourceFiles":[{"displayName":"area.vue","path":"./src/chart/area.vue"}],"uid":"00339","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"spline-area","name":"Spline Area","description":"This demo for Essential JS2 Chart control shows how to render the spline area series.","category":"Area Charts","sourceFiles":[{"displayName":"spline-area.vue","path":"./src/chart/spline-area.vue"}],"uid":"003310","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"step-area","name":"Step Area","description":"This demo for Essential JS2 Chart control shows how to render the step area series.","category":"Area Charts","sourceFiles":[{"displayName":"step-area.vue","path":"./src/chart/step-area.vue"}],"uid":"003311","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"range-area","name":"Range Area","description":"This demo for Essential JS2 Chart control shows how to render the range area series.","category":"Area Charts","sourceFiles":[{"displayName":"range-area.vue","path":"./src/chart/range-area.vue"}],"uid":"003312","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-area","name":"Stacked Area","description":"This demo for Essential JS2 Chart control shows how to render the stacking area series.","category":"Area Charts","sourceFiles":[{"displayName":"stacked-area.vue","path":"./src/chart/stacked-area.vue"}],"uid":"003313","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-area-100","name":"100% Stacked Area","description":"This demo for Essential JS2 Chart control shows how to render the 100 percent stacking area series.","category":"Area Charts","sourceFiles":[{"displayName":"stacked-area-100.vue","path":"./src/chart/stacked-area-100.vue"}],"uid":"003314","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"area-empty","name":"Area - Empty Points","description":"This demo for Essential JS2 Chart control shows how to render the area series with empty points.","category":"Area Charts","sourceFiles":[{"displayName":"area-empty.vue","path":"./src/chart/area-empty.vue"}],"uid":"003315","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"area-segments","name":"Area Zone","description":"This demo for Essential JS2 Chart control shows how to render and configure the points in a particular range using MultiColoredArea series.","category":"Area Charts","sourceFiles":[{"displayName":"area-segments.vue","path":"./src/chart/area-segments.vue"}],"uid":"003316","order":1,"component":"Chart","dir":"chart","parentId":"03"},{"url":"column","name":"Column","description":"This demo for Essential JS2 Chart control shows how to render the column series.","category":"Bar Charts","sourceFiles":[{"displayName":"column.vue","path":"./src/chart/column.vue"}],"uid":"003317","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"rounded-column","name":"Rounded Column","description":"This demo for Essential JS2 Chart control shows how to render the rounded column series.","category":"Bar Charts","sourceFiles":[{"displayName":"rounded-column.vue","path":"./src/chart/rounded-column.vue"}],"uid":"003318","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"column-placement","name":"Back to Back Column","description":"This demo for Essential JS2 Chart control shows how to render and configure the column charts.","category":"Bar Charts","sourceFiles":[{"displayName":"column-placement.vue","path":"./src/chart/column-placement.vue"}],"uid":"003319","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"range-column","name":"Range Column","description":"This demo for Essential JS2 Chart control shows how to render the range column series.","category":"Bar Charts","sourceFiles":[{"displayName":"range-column.vue","path":"./src/chart/range-column.vue"}],"uid":"003320","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"range-bar","name":"Inversed Range Column","description":"This demo for Essential JS2 Chart control shows how to render the inversed range column series.","category":"Bar Charts","sourceFiles":[{"displayName":"range-bar.vue","path":"./src/chart/range-bar.vue"}],"uid":"003321","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"bar","name":"Bar","description":"This demo for Essential JS2 Chart control shows how to render bar series.","category":"Bar Charts","sourceFiles":[{"displayName":"bar.vue","path":"./src/chart/bar.vue"}],"uid":"003322","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-column","name":"Stacked Column","description":"This demo for Essential JS2 Chart control shows how to render the stacking column series.","category":"Bar Charts","sourceFiles":[{"displayName":"stacked-column.vue","path":"./src/chart/stacked-column.vue"}],"uid":"003323","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-column-100","name":"100% Stacked Column","description":"This demo for Essential JS2 Chart control shows how to render the 100 percent stacking column series.","category":"Bar Charts","sourceFiles":[{"displayName":"stacked-column-100.vue","path":"./src/chart/stacked-column-100.vue"}],"uid":"003324","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-bar","name":"Stacked Bar","description":"This demo for Essential JS2 Chart control shows how to render the stacking bar series.","category":"Bar Charts","sourceFiles":[{"displayName":"stacked-bar.vue","path":"./src/chart/stacked-bar.vue"}],"uid":"003325","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stacked-bar-100","name":"100% Stacked Bar","description":"This demo for Essential JS2 Chart control shows how to render the 100 percent stacking bar series.","category":"Bar Charts","sourceFiles":[{"displayName":"stacked-bar-100.vue","path":"./src/chart/stacked-bar-100.vue"}],"uid":"003326","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"tornado","name":"Negative Stack","description":"This demo for Essential JS2 Chart control shows how to render and configure the bar charts.","category":"Bar Charts","sourceFiles":[{"displayName":"tornado.vue","path":"./src/chart/tornado.vue"}],"uid":"003327","order":2,"component":"Chart","dir":"chart","parentId":"03"},{"url":"scatter-plot","name":"Scatter Plot","description":"This demo for Essential JS2 Chart control shows how to render the scatter series.","category":"Scatter and Bubble","sourceFiles":[{"displayName":"scatter-plot.vue","path":"./src/chart/scatter-plot.vue"},{"displayName":"scatter-data.ts","path":"./src/chart/scatter-data.ts"}],"uid":"003328","order":3,"component":"Chart","dir":"chart","parentId":"03"},{"url":"bubble","name":"Bubble","description":"This demo for Essential JS2 Chart control shows how to render the bubble series.","category":"Scatter and Bubble","sourceFiles":[{"displayName":"bubble.vue","path":"./src/chart/bubble.vue"}],"uid":"003329","order":3,"component":"Chart","dir":"chart","parentId":"03"},{"url":"waterfall","name":"Waterfall","description":"This demo for Essential JS2 Chart control shows how to render the waterfall series.","category":"Other Types","sourceFiles":[{"displayName":"waterfall.vue","path":"./src/chart/waterfall.vue"}],"uid":"003330","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"histogram","name":"Histogram","description":"This demo for Essential JS2 Chart control shows how to render the histogram series.","category":"Other Types","sourceFiles":[{"displayName":"histogram.vue","path":"./src/chart/histogram.vue"}],"uid":"003331","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"box-and-whisker","name":"Box and Whisker","description":"This demo for Essential JS2 Chart control shows how to render the box and whisker series.","category":"Other Types","sourceFiles":[{"displayName":"box-and-whisker.vue","path":"./src/chart/box-and-whisker.vue"}],"uid":"003332","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"error-bar","name":"Error Bar","description":"This demo for Essential JS2 Chart control shows how to render and configure the error bars in charts.","category":"Other Types","sourceFiles":[{"displayName":"error-bar.vue","path":"./src/chart/error-bar.vue"}],"uid":"003333","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"trend-lines","name":"Trendlines","description":"This demo for Essential JS2 Chart control shows how to render and configure the trend lines in charts.","category":"Other Types","sourceFiles":[{"displayName":"trend-lines.vue","path":"./src/chart/trend-lines.vue"}],"uid":"003334","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"multi-series-chart","name":"Multi-Series Chart","description":"This demo for Essential JS2 Chart control shows how to combine different types of charts.","category":"Other Types","sourceFiles":[{"displayName":"multi-series-chart.vue","path":"./src/chart/multi-series-chart.vue"}],"uid":"003335","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"pareto","name":"Pareto Chart","description":"This demo for Essential JS2 Chart control shows how to render pareto charts.","category":"Other Types","sourceFiles":[{"displayName":"pareto.vue","path":"./src/chart/pareto.vue"}],"uid":"003336","order":4,"component":"Chart","dir":"chart","parentId":"03"},{"url":"hilo","name":"Hilo","description":"This demo for Essential JS2 Chart control shows how to render the hilo series.","category":"Stock Charts","sourceFiles":[{"displayName":"hilo","path":"./src/chart/hilo.vue"},{"displayName":"chartData.vue","path":"./src/chart/financial-data.ts"}],"uid":"003337","order":5,"component":"Chart","dir":"chart","parentId":"03"},{"url":"hilo-open-close","name":"Hilo Open Close","category":"Stock Charts","description":"This demo for Essential JS2 Chart control shows how to render the hilo open close series.","sourceFiles":[{"displayName":"hilo-open-close","path":"./src/chart/hilo-open-close.vue"},{"displayName":"chartData.vue","path":"./src/chart/stock-chart-data.ts"}],"uid":"003338","order":5,"component":"Chart","dir":"chart","parentId":"03"},{"url":"candle-stick","name":"Candle Stick","category":"Stock Charts","description":"This demo for Essential JS2 Chart control shows how to render the candle series.","sourceFiles":[{"displayName":"candle-stick.vue","path":"./src/chart/candle-stick.vue"},{"displayName":"stock-chart-data.ts","path":"./src/chart/stock-chart-data.ts"}],"uid":"003339","order":5,"component":"Chart","dir":"chart","parentId":"03"},{"url":"accumulation-distribution-indicator","name":"Accumulation Distribution","description":"This demo for Essential JS2 Chart control shows how to render and configure the accumulation distribution indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"accumulation-distribution-indicator.vue","path":"./src/chart/accumulation-distribution-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003340","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"average-true-range-indicator","name":"ATR","description":"This demo for Essential JS2 Chart control shows how to render and configure the average true range indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"average-true-range-indicator.vue","path":"./src/chart/average-true-range-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003341","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"bollinger","name":"Bollinger","description":"This demo for Essential JS2 Chart control shows how to render and configure the bollinger band type indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"bollinger.vue","path":"./src/chart/bollinger.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003342","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"exponential-moving-average-indicator","name":"EMA","description":"This demo for Essential JS2 Chart control shows how to render and configure the exponential moving average indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"exponential-moving-average-indicator.vue","path":"./src/chart/exponential-moving-average-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003343","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"moving-average-convergence-divergence-indicator","name":"MACD","description":"This demo for Essential JS2 Chart control shows how to render and configure the moving average convergence divergence indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"moving-average-convergence-divergence-indicator.vue","path":"./src/chart/moving-average-convergence-divergence-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003344","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"momentum","name":"Momentum","description":"This demo for Essential JS2 Chart control shows how to render and configure the momentum indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"momentum.vue","path":"./src/chart/momentum.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003345","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"relative-strength-index-indicator","name":"RSI","description":"This demo for Essential JS2 Chart control shows how to render and configure the relative strength index indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"relative-strength-index-indicator.vue","path":"./src/chart/relative-strength-index-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003346","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"simple-moving-average-indicator","name":"SMA","description":"This demo for Essential JS2 Chart control shows how to render and configure the simple moving average indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"simple-moving-average-indicator.vue","path":"./src/chart/simple-moving-average-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003347","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"stochastic","name":"Stochastic","description":"This demo for Essential JS2 Chart control shows how to render and configure the stochastic indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"stochastic.vue","path":"./src/chart/stochastic.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003348","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"triangular-moving-average-indicator","name":"TMA","description":"This demo for Essential JS2 Chart control shows how to render and configure the triangular moving average indicator.","category":"Technical Indicators","sourceFiles":[{"displayName":"triangular-moving-average-indicator.vue","path":"./src/chart/triangular-moving-average-indicator.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003349","order":6,"component":"Chart","dir":"chart","parentId":"03"},{"url":"chart-performance","name":"Chart Performance","description":"This demo for Essential JS2 Chart control shows the performance when plotting large volumes of data and handling high frequency real-time data.","category":"Benchmark","type":"update","sourceFiles":[{"displayName":"chart-performance.vue","path":"./src/chart/chart-performance.vue"}],"uid":"003350","order":7,"component":"Chart","dir":"chart","parentId":"03"},{"url":"default-pie","name":"Pie","description":"This demo for Essential JS2 Chart control shows how to render and configure the pie charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"default-pie.vue","path":"./src/chart/default-pie.vue"}],"uid":"003351","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"pie-radius","name":"Pie with Various Radius","description":"This demo for Essential JS2 Chart control shows how to render and configure the pie chart with various radius","category":"Accumulation Charts","sourceFiles":[{"displayName":"pie-radius.vue","path":"./src/chart/pie-radius.vue"}],"uid":"003352","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"donut","name":"Donut","description":"This demo for Essential JS2 Chart control shows how to render and configure the doughnut charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"donut.vue","path":"./src/chart/donut.vue"}],"uid":"003353","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"pyramid","name":"Pyramid","description":"This demo for Essential JS2 Chart control shows how to render and configure the pyramid charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"pyramid.vue","path":"./src/chart/pyramid.vue"}],"uid":"003354","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"funnel","name":"Funnel","description":"This demo for Essential JS2 Chart control shows how to render and configure the funnel charts.","category":"Accumulation Charts","type":"update","sourceFiles":[{"displayName":"funnel.vue","path":"./src/chart/funnel.vue"}],"uid":"003355","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"default-doughnut","name":"Pie with Legend","description":"This demo for Essential JS2 Chart control shows how to render and configure the legends in pie charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"default-doughnut.vue","path":"./src/chart/default-doughnut.vue"}],"uid":"003356","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"semi-pie","name":"Semi Pie","description":"This demo for Essential JS2 Chart control shows how to render semi-pie and doughnut charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"semi-pie.vue","path":"./src/chart/semi-pie.vue"}],"uid":"003357","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"smart-labels","name":"Smart Labels","description":"This demo for Essential JS2 Chart control shows how to arrange the labels smartly without overlapping with each other.","category":"Accumulation Charts","sourceFiles":[{"displayName":"smart-labels.vue","path":"./src/chart/smart-labels.vue"}],"uid":"003358","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"drill-down-pie","name":"Drilldown","description":"This demo for Essential JS2 Chart control shows how to achieve the drill-down concept using pie charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"drill-down-pie.vue","path":"./src/chart/drill-down-pie.vue"}],"uid":"003359","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"grouping","name":"Grouping","description":"This demo for Essential JS2 Chart control shows how to group points in pie charts.","category":"Accumulation Charts","sourceFiles":[{"displayName":"grouping.vue","path":"./src/chart/grouping.vue"}],"uid":"003360","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"pie-empty-point","name":"Empty Points","description":"This demo for Essential JS2 Chart control shows how to render and configure the empty points.","category":"Accumulation Charts","sourceFiles":[{"displayName":"pie-empty-point.vue","path":"./src/chart/pie-empty-point.vue"}],"uid":"003361","order":8,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-line","name":"Line","description":"This demo for Essential JS2 Chart control shows how to render line in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-line.vue","path":"./src/chart/polar-line.vue"}],"uid":"003362","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-spline","name":"Spline","description":"This demo for Essential JS2 Chart control shows how to render spline in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-spline.vue","path":"./src/chart/polar-spline.vue"},{"displayName":"chartdata.service.ts","path":"./src/chart/chartdata.service.ts"}],"uid":"003363","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-area","name":"Area","description":"This demo for Essential JS2 Chart control shows how to render area in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-area.vue","path":"./src/chart/polar-area.vue"}],"uid":"003364","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-stacking-area","name":"Stacked Area","description":"This demo for Essential JS2 Chart control shows how to render stacking area in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-stacking-area.vue","path":"./src/chart/polar-stacking-area.vue"}],"uid":"003365","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-scatter","name":"Scatter","description":"This demo for Essential JS2 Chart control shows how to render scatter in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-scatter.vue","path":"./src/chart/polar-scatter.vue"}],"uid":"003366","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-column","name":"Column","description":"This demo for Essential JS2 Chart control shows how to render column in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-column.vue","path":"./src/chart/polar-column.vue"}],"uid":"003367","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-stacking-column","name":"Wind Rose","description":"This demo for Essential JS2 Chart control shows how to render wind rose using stacking column in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-stacking-column.vue","path":"./src/chart/polar-stacking-column.vue"}],"uid":"003368","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"polar-range-column","name":"Range Column","description":"This demo for Essential JS2 Chart control shows how to render range column in polar and radar charts.","category":"Polar Radar","sourceFiles":[{"displayName":"polar-range-column.vue","path":"./src/chart/polar-range-column.vue"}],"uid":"003369","order":9,"component":"Chart","dir":"chart","parentId":"03"},{"url":"local-data","name":"Local Data","description":"This demo for Essential JS2 Chart control shows how to bind JSON data to chart.","category":"Data Binding","sourceFiles":[{"displayName":"local-data.vue","path":"./src/chart/local-data.vue"}],"uid":"003370","order":10,"component":"Chart","dir":"chart","parentId":"03"},{"url":"remote-data","name":"Remote Data","description":"This demo for Essential JS2 Chart control shows how to consume data from remote data service.","category":"Data Binding","sourceFiles":[{"displayName":"remote-data.vue","path":"./src/chart/remote-data.vue"}],"uid":"003371","order":10,"component":"Chart","dir":"chart","parentId":"03"},{"url":"lazy-loading","name":"Lazy Loading","description":"This demo for Essential JS2 Chart control demonstrates the Lazy Loading behavior in chart.","category":"Data Binding","sourceFiles":[{"displayName":"lazy-loading.vue","path":"./src/chart/lazy-loading.vue"}],"uid":"003372","order":10,"component":"Chart","dir":"chart","parentId":"03"},{"url":"numeric","name":"Numeric Axis","description":"This demo for Essential JS2 Chart control shows how to plot numeric data with the help of numeric axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"numeric.vue","path":"./src/chart/numeric.vue"}],"uid":"003373","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"date-time","name":"Datetime Axis","description":"This demo for Essential JS2 Chart control shows how to render the date-time axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"date-time.vue","path":"./src/chart/date-time.vue"}],"uid":"003374","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"date-time-category","name":"DateTime Categoty Axis","description":"This demo for Essential JS2 Chart control shows how to render the date-time category axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"date-time-category.vue","path":"./src/chart/date-time-category.vue"}],"uid":"003375","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"category","name":"Category Axis","description":"This demo for Essential JS2 Chart control shows how to render the category axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"category.vue","path":"./src/chart/category.vue"}],"uid":"003376","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"indexed","name":"Indexed Category Axis","description":"This demo for Essential JS2 Chart control shows how to render the indexed category axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"indexed.vue","path":"./src/chart/indexed.vue"}],"uid":"003377","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"logarithmic-scale","name":"Logarithmic Scale","description":"This demo for Essential JS2 Chart control shows how to render the logarithmic axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"logarithmic-scale.vue","path":"./src/chart/logarithmic-scale.vue"}],"uid":"003378","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"multiple-axis","name":"Multiple Axis","description":"This demo for Essential JS2 Chart control shows how to render and configure the mulitple axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"multiple-axis.vue","path":"./src/chart/multiple-axis.vue"}],"uid":"003379","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"inversed","name":"Inversed Axis","description":"This demo for Essential JS2 Chart control shows how to invert the axis in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"inversed.vue","path":"./src/chart/inversed.vue"}],"uid":"003380","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"strip-line","name":"Strip Line","description":"This demo for Essential JS2 Chart control shows how to render and configure the strip lines in charts.","category":"Chart Axes","sourceFiles":[{"displayName":"strip-line.vue","path":"./src/chart/strip-line.vue"}],"uid":"003381","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"strip-line-recurrence","name":"Strip Line Recurrence","category":"Chart Axes","description":"This demo for Essential JS2 Chart control shows how to render the strip line recurrence in charts.","sourceFiles":[{"displayName":"strip-line-recurrence.vue","path":"./src/chart/strip-line-recurrence.vue"}],"uid":"003382","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"smart-axis-labels","name":"Smart Labels","description":"This demo for Essential JS2 Chart control shows how to arrange the labels smartly without overlapping with each other.","category":"Chart Axes","sourceFiles":[{"displayName":"smart-axis-labels.vue","path":"./src/chart/smart-axis-labels.vue"}],"uid":"003383","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"multi-level-label","name":"Multi Level Labels","description":"This demo for Essential JS2 Chart control shows how to group the axis labels.","category":"Chart Axes","sourceFiles":[{"displayName":"multi-level-label.vue","path":"./src/chart/multi-level-label.vue"}],"uid":"003384","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"axes-crossing","name":"Axes Crossing","description":"This demo for Essential JS2 Chart control demonstrates the axis crossing behavior in chart.","category":"Chart Axes","sourceFiles":[{"displayName":"axes-crossing.vue","path":"./src/chart/axes-crossing.vue"}],"uid":"003385","order":11,"component":"Chart","dir":"chart","parentId":"03"},{"url":"sorting","name":"Sorting","description":"This demo for Essential JS2 Chart control shows how to sort the series data in chart.","category":"Chart Customization","sourceFiles":[{"displayName":"axes-crossing.vue","path":"./src/chart/axes-crossing.vue"}],"uid":"003386","order":12,"component":"Chart","dir":"chart","parentId":"03"},{"url":"marker-chart","name":"Marker Chart","description":"This demo for Essential JS2 Chart control shows how to render the marker symbols for data points.","category":"Chart Customization","sourceFiles":[{"displayName":"marker-chart.vue","path":"./src/chart/marker-chart.vue"}],"uid":"003387","order":12,"component":"Chart","dir":"chart","parentId":"03"},{"url":"pie-annotation","name":"Annotation","description":"This demo for Essential JS2 Chart control shows how to add more information to the chart using annotation.","category":"Chart Customization","sourceFiles":[{"displayName":"pie-annotation.vue","path":"./src/chart/pie-annotation.vue"}],"uid":"003388","order":12,"component":"Chart","dir":"chart","parentId":"03"},{"url":"data-label-template","name":"DataLabel Template","description":"This demo for Essential JS2 Chart control shows how to render and configure the data label template.","category":"Chart Customization","sourceFiles":[{"displayName":"data-label-template.vue","path":"./src/chart/data-label-template.vue"}],"uid":"003389","order":12,"component":"Chart","dir":"chart","parentId":"03"},{"url":"vertical","name":"Vertical Chart","description":"This demo for Essential JS2 Chart control shows how to render and configure the vertical type charts.","category":"Chart Customization","sourceFiles":[{"displayName":"vertical.vue","path":"./src/chart/vertical.vue"}],"uid":"003390","order":12,"component":"Chart","dir":"chart","parentId":"03"},{"url":"empty-point","name":"Empty Points","description":"This demo for Essential JS2 Chart control shows how to render and configure the empty points.","category":"Chart Customization","sourceFiles":[{"displayName":"empty-point.vue","path":"./src/chart/empty-point.vue"}],"uid":"003391","order":12,"component":"Chart","dir":"chart","parentId":"03"},{"url":"print","name":"Print","description":"This demo for Essential JS2 Chart control shows how to print the charts.","category":"Print and Export","sourceFiles":[{"displayName":"print.vue","path":"./src/chart/print.vue"}],"uid":"003392","order":13,"component":"Chart","dir":"chart","parentId":"03"},{"url":"export","name":"Export","description":"This demo for Essential JS2 Chart control shows how to export the charts to Excel, PDF, and image formats such as SVG, JPEG, and PNG at client-side.","category":"Print and Export","sourceFiles":[{"displayName":"export.vue","path":"./src/chart/export.vue"}],"uid":"003393","order":13,"component":"Chart","dir":"chart","parentId":"03"},{"url":"selection","name":"Selection","description":"This demo for Essential JS2 Chart control demonstrates the selection behavior in chart.","category":"User Interaction","sourceFiles":[{"displayName":"selection.vue","path":"./src/chart/selection.vue"}],"uid":"003394","order":14,"component":"Chart","dir":"chart","parentId":"03"},{"url":"range-selection","name":"Range Selection","description":"This demo for Essential JS2 Chart control demonstrates the range selection in chart.","category":"User Interaction","sourceFiles":[{"displayName":"range-selection.vue","path":"./src/chart/range-selection.vue"}],"uid":"003395","order":14,"component":"Chart","dir":"chart","parentId":"03"},{"url":"cross-hair","name":"Crosshair","description":"This demo for Essential JS2 Chart control demonstrates the crosshair behavior in chart.","category":"User Interaction","sourceFiles":[{"displayName":"cross-hair.vue","path":"./src/chart/cross-hair.vue"},{"displayName":"financial-data.ts","path":"./src/chart/financial-data.ts"}],"uid":"003396","order":14,"component":"Chart","dir":"chart","parentId":"03"},{"url":"trackball","name":"Trackball","description":"This demo for Essential JS2 Chart control demonstrates the trackball behavior in chart.","category":"User Interaction","sourceFiles":[{"displayName":"trackball.vue","path":"./src/chart/trackball.vue"},{"displayName":"trackball-data.ts","path":"./src/chart/trackball-data.ts"}],"uid":"003397","order":14,"component":"Chart","dir":"chart","parentId":"03"},{"url":"zooming","name":"Zooming and Panning","description":"This demo for Essential JS2 Chart control demonstrates the zooming and panning behavior in chart.","category":"User Interaction","sourceFiles":[{"displayName":"zooming.vue","path":"./src/chart/zooming.vue"}],"uid":"003398","order":14,"component":"Chart","dir":"chart","parentId":"03"},{"url":"data-editing","name":"Data Editing","description":"This demo sample for Essential JavaScript2 Chart control demonstrates the data editing behavior in chart.","category":"User Interaction","type":"new","sourceFiles":[{"displayName":"data-editing.vue","path":"./src/chart/data-editing.vue"}],"uid":"003399","order":14,"component":"Chart","dir":"chart","parentId":"03"}],"order":1,"uid":"03"},{"name":"Diagram","directory":"diagram","category":"Data Visualization","ftName":"diagram","samples":[{"url":"default-functionality","name":"Default Functionalities","description":"This demo for Essential JS2 Diagram component visualizes the processing of an order placed using credit card with built-in flow shapes.","category":"Getting Started","uid":"00440","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"shape-gallery","name":"Shapes","description":"This demo for Essential JS2 Diagram component illustrates basic built-in shapes, such as basic shapes, flow shapes, and BPMN shapes.","category":"Getting Started","uid":"00441","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"node","name":"Nodes","description":"This demo for Essential JS2 Diagram component visualizes the different stages of a software development life cycle using a circular flow diagram. Customizing the appearance of the nodes is illustrated in this example.","category":"Getting Started","uid":"00442","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"connector","name":"Connectors","description":"This demo for Essential JS2 Diagram component visualizes the data flow in a marketing process using predefined shapes and connectors. Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.","category":"Getting Started","uid":"00443","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"annotation","name":"Annotations","description":"This demo for Essential JS2 Diagram component illustrates the competitive environment of a business through five forces chart. The elements of the five force chart is described using nodes and annotations. Customizing the position and appearance of the annotation is illustrated in this example.","category":"Getting Started","uid":"00444","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"port","name":"Ports","description":"This demo for Essential JS2 Diagram component visualizes the process flow of publishing a book using connection points. Connection points are static points over the shapes that allow creating connections to the shapes. Customizing the size and appearance of the connection points is illustrated in this example.","category":"Getting Started","uid":"00445","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"swimlane","name":"Swimlane","description":"This sample  Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.","category":"Getting Started","uid":"00446","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"html-node","name":"Complex Shapes","description":"This demo for Essential JS2 Diagram component demonstrates how to host a HTML element inside a node. In this example, a Gauge control is hosted inside a HTML Node.","category":"Getting Started","uid":"00447","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"diagram-events","name":"Events","description":"This sample trace the diagram events while performing interaction in diagram.","category":"Getting Started","uid":"00448","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"tooltip","name":"Tooltip","description":"This sample shows the feature of tooltip in diagram control","category":"Getting Started","uid":"00449","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"history-manager","name":"History Manager","description":"This sample  Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.","category":"Getting Started","uid":"004410","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"flow-execution","name":"Flow Execution","description":"This sample  Different types of connectors and decorators are used to customize the appearance, path, and direction of the data flow.","category":"Getting Started","uid":"004411","order":0,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"bpmn-editor","name":"BPMN Editor","description":"This demo for Essential JS2 Diagram component visualizes the hotel booking reservation system and its built with readymade BPMN shapes.","category":"Use Case Diagram","uid":"004412","order":1,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"logical-circuit","name":"Logic Circuit Diagram","description":"This sample visualizes implementation of three input Boolean functions using universal logic gates, and it is designed with diagram `custom` nodes.","category":"Use Case Diagram","uid":"004413","order":1,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"uml-activity","name":"UML Activity Diagram","description":"This sample visualizes graphical representation of message flow from one activity to another in customer service with built-in `UML activity` shapes.","category":"Use Case Diagram","uid":"004414","order":1,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"network-diagram","name":"Network Diagram","description":"This sample visualizes graphical layout of a network diagram using diagram `Native (SVG)` shapes.","category":"Use Case Diagram","uid":"004415","order":1,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"uml-class-diagram","name":"UML Class Diagram","description":"This sample visualizes the class diagram shapes.","category":"Use Case Diagram","uid":"004416","order":1,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"hierarchical-model","name":"Hierarchical Tree","description":"This demo for Essential JS2 Diagram component illustrates a simple hierarchical tree that is built from an external data source. Hierarchical tree layout algorithm is used to build hierarchical trees. Customizing the spacing between objects and orientation of the trees is illustrated in this example.","category":"Automatic Layouts","uid":"004417","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"organization-model","name":"Organizational Chart","description":"This demo for Essential JS2 Diagram component illustrates a simple business management structure that is built from an external data source. Hierarchical tree layout algorithm is used to build organizational charts. Customizing the orientation and structure of the organizational chart is illustrated in this example.","category":"Automatic Layouts","uid":"004418","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"radial-tree","name":"Radial Tree","description":"This demo for Essential JS2 Diagram component demonstrates a huge organizational structure using a compact layout model. Radial tree layout algorithm is used to build such a layout.","category":"Automatic Layouts","uid":"004419","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"mind-map","name":"Mind Map","description":"This demo for Essential JS2 Diagram component demonstrates the concept of creativity using mind map layout algorithm. User handles are used to extend the mind map interactively.","category":"Automatic Layouts","uid":"004420","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"symmetric-layout","name":"Symmetric Layout","description":"This demo for Essential JS2 Diagram component visualizes a simple network template using symmetrical layout algorithm.","category":"Automatic Layouts","uid":"004421","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"complex-hierarchicaltree","name":"Complex Hierarchical Tree","description":"This demo for Essential JS2 Diagram component demonstrates a complex hierarchical template that is built from an external data source using complex hierarchical tree algorithm.","category":"Automatic Layouts","uid":"004422","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"right-to-left-tree","name":"RTL Tree","description":"This demo for Essential JS2 Diagram component visualizes the concept of Artificical Intelligence using hierarchical tree layout algorithm","category":"Automatic Layouts","uid":"004423","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"pert-chart","name":"PERT Chart","description":"This demo for Essential JS2 Diagram component visualizes a project development process using Program Evaluation Review Technique (PERT). Complex hierarchical tree layout algorithm is used to automatically arrange the nodes.","category":"Automatic Layouts","uid":"004424","order":2,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"drawing-tool","name":"Drawing Tools","description":"This demo for Essential JS2 Diagram component visualizes how to build a diagram interactively using drawing tools. Continuous draw option, snapping, and undo/redo support are enabled to easily draw diagrams. Rulers, gridlines, and snapping options are enabled to easily align objects.","category":"User Interaction","uid":"004425","order":3,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"keyboard-functions","name":"Keyboard Interaction","description":"This demo for Essential JS2 Diagram component illustrates interaction with diagram control using shortcut keys. Command Manager support is used to manage keyboard interactions.","category":"User Interaction","uid":"004426","order":3,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"quick-commands","name":"User Handles","description":"This demo for Essential JS2 Diagram component visualizes a simple flow diagram along with options to execute the frequently used commands using user handles.","category":"User Interaction","uid":"004427","order":3,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"symbol-palette","name":"Symbol Palette","description":"This example illustrates predefining shapes in a palette that can be easily dragged and dropped into the drawing area. Customizable options of the symbol palette are also illustrated in this example.","category":"User Interaction","uid":"004428","order":3,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"overview","name":"Overview Panel","description":"This demo for Essential JS2 Diagram component visualizes an organizational structure along with an overview for easily navigating the large organizational structure using Overview Panel.","category":"User Interaction","uid":"004429","order":3,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"serialization","name":"Save and Load","description":"This demo for Essential JS2 Diagram component visualizes building diagrams interactively and editing the saved diagrams. Symbol Palette is used to easily build diagrams.","category":"Print and Export","uid":"004430","order":4,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"print-export","name":"Print and Export","description":"This demo for Essential JS2 Diagram component demonstrates printing and exporting the diagram as images.","category":"Print and Export","uid":"004431","order":4,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"remote-data","name":"Remote Data","description":"This demo for Essential JS2 Diagram component demonstrates binding remote data with the diagram using the Data Manager support.","category":"Data Binding","uid":"004432","order":5,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"local-data","name":"Local Data","description":"This demo for Essential JS2 Diagram component visualizes the classifications of species using hierarchical tree layout algorithm. Data Manager support is used to bind data with the diagram.","category":"Data Binding","uid":"004433","order":5,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"crud","name":"CRUD","description":"This sample visualizes diagram elements created from database with diagram CRUD. Users can read, update, and delete database entities as diagram elements.","category":"Data Binding","uid":"004434","order":5,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"venn-diagram","name":"Venn Diagram","description":"This demo for Essential JS2 Diagram component visually represents the hotel booking reservation system. It is built with readymade BPMN shapes.","category":"Static Diagram","uid":"004435","order":6,"component":"Diagram","dir":"diagram","parentId":"04"},{"url":"fishbone-diagram","name":"Fishbone Diagram","description":"This demo for Essential JS2 Diagram component visually represents a simple fishbone diagram (Ishikawa). Diagram nodes and annotations are used to define fishbone diagrams. Read-only mode is enabled here.","category":"Static Diagram","uid":"004436","order":6,"component":"Diagram","dir":"diagram","parentId":"04"}],"order":1,"uid":"04"},{"name":"Stock Chart","directory":"stock-chart","category":"Data Visualization","ftName":"stock-chart","samples":[{"url":"default","name":"Default","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with candle series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00550","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"ohlc","name":"OHLC","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with Hilo Open Close series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00551","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"multi-pane","name":"Candlestick and volume","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with candle series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00552","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"multiple-series","name":"Multiple Series","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with candle series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00553","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"spline","name":"Spline","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with Spline series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00554","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"area","name":"Area","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with Area series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00555","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"spline-area","name":"Spline Area","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with Spline Area series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00556","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"inversed-area","name":"Inversed Area","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with Area series inverted.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00557","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"plot-line","name":"Plot lines","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with Spline Area series.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00558","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"strip-line","name":"Plot band","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with strip line.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"00559","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"period-customization","name":"Intraday","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with period customization.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"005510","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"disabled-navigator","name":"Hide Range Selector","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with period customization.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"005511","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"disabled-period","name":"Hide Period Selector","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with period customization.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"005512","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"},{"url":"stock-events","name":"Stock Events","description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with stock events.","category":"Stock Chart","api":{"RangeNavigator":["valueType","series","intervalType"]},"uid":"005513","order":0,"component":"Stock Chart","dir":"stock-chart","parentId":"05"}],"order":1,"uid":"05"},{"name":"Maps","directory":"maps","category":"Data Visualization","type":"update","samples":[{"url":"default","name":"Default Functionalities","category":"Maps","api":{},"sourceFiles":[{"displayName":"default.vue","path":"./src/maps/default.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"default-datasource.json","path":"./src/maps/map-data/default-datasource.json"}],"uid":"00660","order":0,"component":"Maps","dir":"maps","parentId":"06"},{"url":"projection","name":"Projection","category":"Features","api":{},"sourceFiles":[{"displayName":"projection.vue","path":"./src/maps/projection.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"projection-datasource.json","path":"./src/maps/map-data/projection-datasource.json"}],"uid":"00661","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"multilayer","name":"Multi-layers","category":"Features","api":{},"sourceFiles":[{"displayName":"multilayer.vue","path":"./src/maps/multilayer.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"usa.json","path":"./src/maps/map-data/usa.json"},{"displayName":"texas.json","path":"./src/maps/map-data/texas.json"},{"displayName":"california.json","path":"./src/maps/map-data/california.json"}],"uid":"00662","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"marker","name":"Marker","category":"Features","api":{},"sourceFiles":[{"displayName":"marker.vue","path":"./src/maps/marker.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"marker-location.ts","path":"./src/maps/map-data/marker-location.ts"}],"uid":"00663","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"marker-template","name":"Marker template","category":"Features","api":{},"sourceFiles":[{"displayName":"marker-template.vue","path":"./src/maps/marker-template.vue"},{"displayName":"australia.json","path":"./src/maps/map-data/australia.json"}],"uid":"00664","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"marker-cluster","name":"Marker clustering","category":"Features","api":{},"type":"new","sourceFiles":[{"displayName":"marker-cluster.vue","path":"./src/maps/marker-cluster.vue"},{"displayName":"cluster-data.ts","path":"./src/maps/map-data/marker-cluster.ts"}],"uid":"00665","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"data-label","name":"Labels","category":"Features","api":{},"sourceFiles":[{"displayName":"data-label.vue","path":"./src/maps/data-label.vue"},{"displayName":"usa.json","path":"./src/maps/map-data/usa.json"}],"uid":"00666","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"bubble","name":"Bubble","category":"Features","api":{},"sourceFiles":[{"displayName":"bubble.vue","path":"./src/maps/bubble.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"population-data.ts","path":"./src/maps/map-data/population-data.ts"}],"uid":"00667","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"navigation-line","name":"Navigation Lines","category":"Features","api":{},"sourceFiles":[{"displayName":"navigation-line.vue","path":"./src/maps/navigation-line.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"map-location.ts","path":"./src/maps/map-data/map-location.ts"}],"uid":"00668","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"legend","name":"Legend","category":"Features","api":{},"sourceFiles":[{"displayName":"legend.vue","path":"./src/maps/legend.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"legend-datasource.json","path":"./src/maps/map-data/legend-datasource.json"}],"uid":"00669","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"color-mapping","name":"Color Mapping","category":"Features","api":{},"sourceFiles":[{"displayName":"color-mapping.vue","path":"./src/maps/color-mapping.vue"},{"displayName":"usa.json","path":"./src/maps/map-data/usa.json"},{"displayName":"color-mapping.json","path":"./src/maps/map-data/color-mapping.json"}],"uid":"006610","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"annotation","name":"Annotations","category":"Features","api":{},"sourceFiles":[{"displayName":"annotation.vue","path":"./src/maps/annotation.vue"},{"displayName":"africa-continent.json","path":"./src/maps/map-data/africa-continent.json"}],"uid":"006611","order":1,"component":"Maps","dir":"maps","parentId":"06"},{"url":"osm","name":"OpenStreetMap","category":"Map Providers","api":{},"sourceFiles":[{"displayName":"osm.vue","path":"./src/maps/osm.vue"}],"uid":"006612","order":2,"component":"Maps","dir":"maps","parentId":"06"},{"url":"osm-with-navigation-lines","name":"Osm with Navigation Line","category":"Map Providers","api":{},"sourceFiles":[{"displayName":"osm-with-navigation-lines.vue","path":"./src/maps/osm-with-navigation-lines.vue"}],"uid":"006613","order":2,"component":"Maps","dir":"maps","parentId":"06"},{"url":"osm-with-sublayers","name":"Osm with Sublayer","category":"Map Providers","api":{},"sourceFiles":[{"displayName":"osm-with-sublayers.vue","path":"./src/maps/osm-with-sublayers.vue"},{"displayName":"africa.json","path":"./src/maps/map-data/africa.json"}],"uid":"006614","order":2,"component":"Maps","dir":"maps","parentId":"06"},{"url":"tooltip","name":"Tooltip","category":"User Interaction","api":{},"sourceFiles":[{"displayName":"tooltip.vue","path":"./src/maps/tooltip.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"tooltip-datasource.json","path":"./src/maps/map-data/tooltip-datasource.json"}],"uid":"006615","order":3,"component":"Maps","dir":"maps","parentId":"06"},{"url":"selection","name":"Selection & Highlight","category":"User Interaction","api":{},"sourceFiles":[{"displayName":"selection.vue","path":"./src/maps/selection.vue"},{"displayName":"usa.json","path":"./src/maps/map-data/usa.json"},{"displayName":"selection-datasource.json","path":"./src/maps/map-data/selection-datasource.json"}],"uid":"006616","order":3,"component":"Maps","dir":"maps","parentId":"06"},{"url":"zooming","name":"Zooming & Panning","category":"User Interaction","api":{},"sourceFiles":[{"displayName":"zooming.vue","path":"./src/maps/zooming.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"zooming-datasource.json","path":"./src/maps/map-data/zooming-datasource.json"}],"uid":"006617","order":3,"component":"Maps","dir":"maps","parentId":"06"},{"url":"drilldown","name":"Drill Down","category":"User Interaction","api":{},"sourceFiles":[{"displayName":"drilldown.vue","path":"./src/maps/drilldown.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"default-datasource.json","path":"./src/maps/map-data/default-datasource.json"},{"displayName":"europe.json","path":"./src/maps/map-data/europe.json"},{"displayName":"asia.json","path":"./src/maps/map-data/asia.json"},{"displayName":"north-america.json","path":"./src/maps/map-data/north-america.json"},{"displayName":"south-america.json","path":"./src/maps/map-data/south-america.json"},{"displayName":"oceania.json","path":"./src/maps/map-data/oceania.json"}],"uid":"006618","order":3,"component":"Maps","dir":"maps","parentId":"06"},{"url":"print","name":"Print","category":"Print and Export","api":{},"sourceFiles":[{"displayName":"print.vue","path":"./src/maps/print.vue"},{"displayName":"usa.json","path":"./src/maps/map-data/usa.json"},{"displayName":"print-datasource.json","path":"./src/maps/map-data/print-datasource.json"}],"uid":"006619","order":4,"component":"Maps","dir":"maps","parentId":"06"},{"url":"export","name":"Export","category":"Print and Export","api":{},"sourceFiles":[{"displayName":"export.vue","path":"./src/maps/export.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"}],"uid":"006620","order":4,"component":"Maps","dir":"maps","parentId":"06"},{"url":"heatmap","name":"Heat Map","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"heatmap.vue","path":"./src/maps/heatmap.vue"},{"displayName":"india.json","path":"./src/maps/map-data/india.json"},{"displayName":"heatmap-datasource.json","path":"./src/maps/map-data/heatmap-datasource.json"}],"uid":"006621","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"curved-lines","name":"Flight routes","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"default.vue","path":"./src/maps/default.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"},{"displayName":"navigation-data.ts","path":"./src/maps/map-data/navigation-data.ts"}],"uid":"006622","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"earthquake","name":"Earthquake indication","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"earthquake.vue","path":"./src/maps/earthquake.vue"},{"displayName":"asia.json","path":"./src/maps/map-data/asia.json"}],"uid":"006623","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"highlighted-region","name":"Highlighted region","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"highlighted-region.vue","path":"./src/maps/highlighted-region.vue"},{"displayName":"oklahoma.json","path":"./src/maps/map-data/oklahoma.json"}],"uid":"006624","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"cyber-attack-map","name":"Cyber Attack Maps","category":"Use Cases","api":{},"uid":"006625","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"dynamic-marker","name":"Dynamic markers","category":"Use Cases","api":{},"type":"new","sourceFiles":[{"displayName":"dynamic-marker.vue","path":"./src/maps/dynamic-marker.vue"}],"uid":"006626","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"pie","name":"Map with Pie chart","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"pie.vue","path":"./src/maps/pie.vue"},{"displayName":"world-map.json","path":"./src/maps/map-data/world-map.json"}],"uid":"006627","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"map-with-slider","name":"Map with Slider","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"map-with-slider.vue","path":"./src/maps/map-with-slider.vue"},{"displayName":"north-america.json","path":"./src/maps/map-data/north-america.json"},{"displayName":"population-growth.json","path":"./src/maps/map-data/population-growth.json"}],"uid":"006628","order":5,"component":"Maps","dir":"maps","parentId":"06"},{"url":"seat-selection","name":"Bus seat booking","category":"Use Cases","api":{},"sourceFiles":[{"displayName":"seat-selection.vue","path":"./src/maps/seat-selection.vue"},{"displayName":"seat.json","path":"./src/maps/map-data/seat.json"}],"uid":"006629","order":5,"component":"Maps","dir":"maps","parentId":"06"}],"order":1,"uid":"06"},{"name":"TreeMap","directory":"treemap","category":"Data Visualization","samples":[{"url":"default","name":"Default Functionalities","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"default.vue","path":"./src/treemap/default.vue"},{"displayName":"car-sale.ts","path":"./src/treemap/treemap-data/car-sale.ts"}],"uid":"00770","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"layout","name":"Layout","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"layout.vue","path":"./src/treemap/layout.vue"},{"displayName":"econmics.ts","path":"./src/treemap/treemap-data/econmics.ts"}],"uid":"00771","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"drilldown","name":"Drilldown","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"drilldown.vue","path":"./src/treemap/drilldown.vue"},{"displayName":"drilldown-sample.ts","path":"./src/treemap/treemap-data/drilldown-sample.ts"}],"uid":"00772","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"customization","name":"Customization","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"customization.vue","path":"./src/treemap/customization.vue"},{"displayName":"metals.ts","path":"./src/treemap/treemap-data/metals.ts"}],"uid":"00773","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"label","name":"Data Label","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"label.vue","path":"./src/treemap/label.vue"},{"displayName":"country-population.ts","path":"./src/treemap/treemap-data/country-population.ts"}],"uid":"00774","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"tooltip","name":"Tooltip","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"tooltip.vue","path":"./src/treemap/tooltip.vue"},{"displayName":"airport-count.ts","path":"./src/treemap/treemap-data/airport-count.ts"}],"uid":"00775","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"election","name":"Legend","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"election.vue","path":"src/treemap/election.vue"},{"displayName":"election-data.ts","path":"src/treemap/treemap-data/election-data.ts"}],"uid":"00776","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"color-mapping","name":"Color Mapping","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"color-mapping.vue","path":"src/treemap/color-mapping.vue"},{"displayName":"color.json","path":"src/treemap/treemap-data/color.json"}],"uid":"00777","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"selection","name":"Selection & Highlight","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"selection.vue","path":"src/treemap/selection.vue"},{"displayName":"import.ts","path":"src/treemap/treemap-data/import.ts"}],"uid":"00778","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"print","name":"Print & Export","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"print.vue","path":"src/treemap/print.vue"},{"displayName":"product.ts","path":"src/treemap/treemap-data/product.ts"}],"uid":"00779","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"pie","name":"TreeMap with Pie","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"pie.vue","path":"src/treemap/pie.vue"},{"displayName":"pie-chart.ts","path":"src/treemap/treemap-data/pie-chart.ts"}],"uid":"007710","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"},{"url":"rtl","name":"RTL","category":"TreeMap","api":{},"sourceFiles":[{"displayName":"rtl.vue","path":"src/treemap/rtl.vue"},{"displayName":"rtl-data.ts","path":"src/treemap/treemap-data/rtl-data.ts"}],"uid":"007711","order":0,"component":"TreeMap","dir":"treemap","parentId":"07"}],"order":1,"uid":"07"},{"name":"Heatmap Chart","directory":"heatmap","category":"Data Visualization","ftName":"heatmap","samples":[{"url":"default","name":"Default Functionalities","category":"Heatmap Chart","description":"This demo for Essential JS2 Heatmap control shows the heat map control displayed with minimum configuration","api":{},"uid":"00880","order":0,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"calendar-heatmap","name":"Calendar Heatmap","category":"Heatmap Chart","description":"This demo for Essential JS2 Heatmap control for displays the time series data and displays the axis labels at specific time interval.","api":{},"uid":"00881","order":0,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"bubble-types","name":"Bubble Types","category":"Bubble HeatMap","description":"This demo for Essential JS2 Heatmap control shows  Size, Color and SizeAndColor bubble heat map type.","api":{},"uid":"00882","order":1,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"color-and-size-attributes","name":"Color and Size Attributes","category":"Bubble HeatMap","description":"This demo for Essential JS2 Heatmap control shows how to bind the multiple data to bubble heat map.","api":{},"uid":"00883","order":1,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"array-row","name":"Row","category":"Data Binding","description":"This demo for Essential JS2 Heatmap control demonstrates how to bind the data to heat map with series of array for each columns.","api":{},"uid":"00884","order":2,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"array-cell","name":"Cell","category":"Data Binding","description":"This demo for Essential JS2 Heatmap control demonstrates how to bind the array data with values for each cell to heatmap.","api":{},"uid":"00885","order":2,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"row-json-binding","name":"JSON Row","category":"Data Binding","description":"This demo for Essential JS2 Heatmap control demonstrates how to bind the JSON object with data for each columns to heatmap.","api":{},"uid":"00886","order":2,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"cell-json-binding","name":"JSON Cell","category":"Data Binding","description":"This demo for Essential JS2 Heatmap control demonstrates how to bind the JSON object with data for each cell to heat map.","api":{},"uid":"00887","order":2,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"empty-points","name":"Empty Points","category":"Features","description":"This demo for Essential JS2 Heatmap control shows the usage of empty points or null points in heat map.","api":{},"uid":"00888","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"inversed-axis","name":"Inversed Axis","category":"Features","description":"This demo for Essential JS2 Heatmap control shows how to inverse the axis in heat map.","api":{},"uid":"00889","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"opposed-axis","name":"Opposed Axis","category":"Features","description":"This demo for Essential JS2 Heatmap control shows how to place the axis opposite to the default position in heatmap.","api":{},"uid":"008810","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"multi-level-labels","name":"Multi Level Labels","category":"Features","description":"This demo for Essential JS2 Heatmap control shows how to group the axis labels","api":{},"uid":"008811","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"cell-selection","name":"Selection","category":"Features","description":"This demo for Essential JS2 Heatmap control shows how to select the cell","api":{},"uid":"008812","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"legend","name":"Legend Placement","category":"Features","description":"This demo for Essential JS2 Heatmap control shows how to place the heatmap legend in different positions.","api":{},"uid":"008813","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"large-data","name":"Large Data","category":"Features","description":"This demo for Essential JS2 Heatmap control shows how to bind the large data in heat map using canvas rendering mode.","api":{},"uid":"008814","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"palette-mode","name":"Palette Mode","category":"Features","description":"This demo for Essential JS2 Heatmap control demonstrates applying gradient colors or solid colors for the heatmap cells.","api":{},"uid":"008815","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"rendering-mode","name":"Rendering Mode","category":"Features","description":"This demo for Essential JS2 Heatmap shows switching the rendering mode of the heatmap cells between SVG and canvas rendering logics.","api":{},"uid":"008816","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"},{"url":"tooltip-template","name":"Tooltip Template","category":"Features","description":"This demo for Essential JS2 Heatmap control shows the usage of tooltip template in heat map.","api":{},"uid":"008817","order":3,"component":"Heatmap Chart","dir":"heatmap","parentId":"08"}],"order":1,"uid":"08"},{"name":"Circular Gauge","directory":"circular-gauge","category":"Data Visualization","samples":[{"url":"default","name":"Default Functionalities","category":"Circular Gauge","api":{"CircularGauge":["axes"]},"uid":"00990","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"range","name":"Range","category":"Circular Gauge","api":{"CircularGauge":["axes"]},"uid":"00991","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"labels","name":"Tick and Labels","category":"Circular Gauge","api":{"CircularGauge":["axes"]},"uid":"00992","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"customization","name":"Gauge Customization","category":"Circular Gauge","api":{"CircularGauge":["axes"]},"uid":"00993","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"semi-circular-gauge","name":"Semi-circular Gauge","category":"Circular Gauge","api":{"CircularGauge":["axes"]},"uid":"00994","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"arc-gauge","name":"Arc Gauge","category":"Circular Gauge","api":{"CircularGauge":["axes"]},"uid":"00995","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"compass","name":"Direction Compass","category":"Circular Gauge","api":{"CircularGauge":["axes","axisLabelRender"]},"uid":"00996","order":0,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"pointer-image","name":"Pointer Image","category":"Pointer","api":{"CircularGauge":["axes","centerY"]},"uid":"00997","order":1,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"pointer","name":"Pointer Customization","category":"Pointer","api":{"CircularGauge":["axes","centerY"]},"uid":"00998","order":1,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"multiple-axis","name":"Multiple Axis","category":"Axes","api":{"CircularGauge":["axes"]},"uid":"00999","order":2,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"user-interaction","name":"Pointer Drag","category":"User Interaction","api":{"CircularGauge":["axes","enablePointerDrag","dragEnd","dragMove"]},"uid":"009910","order":3,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"tooltip","name":"Tooltip","category":"User Interaction","api":{"CircularGauge":["axes","tooltip","tooltipRender"]},"uid":"009911","order":3,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"data-sample","name":"Data Sample","category":"Live","api":{"CircularGauge":["axes"]},"uid":"009912","order":4,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"apple-watch-rings","name":"Apple Watch Rings","category":"Live","uid":"009913","order":4,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"},{"url":"speedometer","name":"Speedometer","category":"Live","api":{"CircularGauge":["axes"]},"uid":"009914","order":4,"component":"Circular Gauge","dir":"circular-gauge","parentId":"09"}],"order":1,"uid":"09"},{"name":"Linear Gauge","directory":"linear-gauge","category":"Data Visualization","ftName":"lineargauge","samples":[{"url":"default","name":"Default Functionalities","description":"This demo for Essential JS2 Linear Gauge control illustrates the default rendering of linear gauge.","category":"Linear Gauge","api":{"LinearGauge":["orientation","annotations","axes"]},"uid":"0010100","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"container","name":"Container","description":"This demo for Essential JS2 Linear Gauge control demonstrates the various types of containers available in linear gauge.","category":"Linear Gauge","api":{"LinearGauge":["axes","container"]},"uid":"0010101","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"ranges","name":"Ranges","description":"This demo for Essential JS2 Linear Gauge control illustrates how to highlight specific regions in an axis by using ranges.","category":"Linear Gauge","api":{"LinearGauge":["axes"]},"uid":"0010102","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"data","name":"Data Sample","description":"This demo for Essential JS2 Linear Gauge control illustrates exercise tracking of an athlete by using ranges, pointers, and annotation features.","category":"Linear Gauge","api":{"LinearGauge":["orientation","annotations","axes"]},"uid":"0010103","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"axes","name":"Axes and Pointers","description":"This demo for Essential JS2 Linear Gauge control shows various properties available to customize the axes and pointers.","category":"Linear Gauge","api":{"LinearGauge":["orientation","annotations","axes"]},"uid":"0010104","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"annotation","name":"Annotation","description":"This demo for Essential JS2 Linear Gauge control illustrates the CPU Utilization of a resource by using annotation feature.","category":"Linear Gauge","api":{"LinearGauge":["orientation","annotations","axes","rangePalettes"]},"uid":"0010105","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"tooltip","name":"Tooltip","description":"This demo for Essential JS2 Linear Gauge control visualizes the tooltip functionality for bar pointer.","category":"Linear Gauge","api":{"LinearGauge":["orientation","annotations","axes","tooltip","tooltipRender","axisLabelRender"]},"uid":"0010106","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"},{"url":"style","name":"Styles","description":"This demo for Essential JS2 Linear Gauge control visualizes the available options for customization.","category":"Linear Gauge","api":{"LinearGauge":["orientation","container","axes"]},"uid":"0010107","order":0,"component":"Linear Gauge","dir":"linear-gauge","parentId":"010"}],"order":1,"uid":"010"},{"name":"Range Selector","directory":"range-navigator","category":"Data Visualization","ftName":"rangenavigator","samples":[{"url":"default","name":"Default","description":"This demo for Essential JS2 Range Navigator control shows the default rendering of range navigator with range area series.","category":"Range Selector","uid":"0011110","order":0,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"light-weight","name":"Lightweight","description":"This demo for Essential JS2 Range Navigator control shows the rendering of light-weight range navigator.","category":"Range Selector","uid":"0011111","order":0,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"date-time","name":"DateTime","description":"This demo for Essential JS2 Range Navigator control shows how to plot date-time values in range navigator.","category":"Axis","uid":"0011112","order":1,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"double","name":"Numeric Axis","description":"This demo for Essential JS2 Range Navigator control shows how to plot numeric data values in the range navigator.","category":"Axis","uid":"0011113","order":1,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"logarithmic","name":"Logarithmic Axis","description":"This demo for Essential JS2 Range Navigator control shows how to visualize the logarithmic scale when data has values with both lower (e.g.: 10^-6) and higher (e.g.: 10^6) orders of magnitude.","category":"Axis","uid":"0011114","order":1,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"multilevel","name":"Multilevel Labels","description":"This demo for Essential JS2 Range Navigator control shows how to display the second level labels.","category":"Axis","uid":"0011115","order":1,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"period-selector","name":"Default","description":"This demo for Essential JS2 Range Navigator control shows how to display the period selector for a range with specified periods.","category":"Period Selector","uid":"0011116","order":2,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"period-selector-stocks","name":"Stock Chart","description":"This demo for Essential JS2 Range Navigator control shows how to render the stock charts with specified periods using period selector.","category":"Period Selector","uid":"0011117","order":2,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"empty-data","name":"Empty Points","description":"This demo for Essential JS2 Range Navigator control shows how to render the empty points in the range navigator.","category":"Customization","uid":"0011118","order":3,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"filter","name":"Filter","description":"This demo for Essential JS2 Range Navigator control shows how to bind the filtered values of the range navigator to grid control.","category":"Customization","uid":"0011119","order":3,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"export","name":"Print and Export","description":"This demo for Essential JS2 Range Navigator control shows how to print the charts and export the chart contents to SVG, PDF, JPEG, PNG, and Excel formats at client-side.","category":"Export","uid":"00111110","order":4,"component":"Range Selector","dir":"range-navigator","parentId":"011"},{"url":"right-to-left","name":"RTL","description":"This demo for Essential JS2 Range Navigator control shows how to invert an axis in the range navigator.","category":"RTL","uid":"00111111","order":5,"component":"Range Selector","dir":"range-navigator","parentId":"011"}],"order":1,"uid":"011"},{"name":"Sparkline Charts","directory":"sparkline","category":"Data Visualization","ftName":"sparkline","samples":[{"url":"default","name":"Default","description":"This demo for Essential JS2 Sparkline control visualizes population, population density, population growth rate, and birth rate of various countries.","category":"Sparkline Charts","api":{},"uid":"0012120","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"},{"url":"series-types","name":"Series Types","description":"This demo for Essential JS2 Sparkline control depicts the various series types available in the sparkline.","category":"Sparkline Charts","api":{},"uid":"0012121","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"},{"url":"axis-types","name":"Axis value types","description":"This demo for Essential JS2 Sparkline control depicts the various axis types available in the sparkline.","category":"Sparkline Charts","api":{},"uid":"0012122","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"},{"url":"spark-grid","name":"Sparkline in Grid","description":"This demo for Essential JS2 Sparkline control demonstrates rendering sparklines in the data grid control.","category":"Sparkline Charts","api":{},"uid":"0012123","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"},{"url":"customization","name":"Customization","description":"This demo for Essential JS2 Sparkline control depicts the properties required to customize the sparkline.","category":"Sparkline Charts","api":{},"uid":"0012124","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"},{"url":"live-update","name":"Live Update","description":"This demo for Essential JS2 Sparkline control depicts the task manager with live data update for sparklines.","category":"Sparkline Charts","api":{},"uid":"0012125","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"},{"url":"range-band","name":"Range Band","description":"This demo for Essential JS2 Sparkline control depicts the range band feature and its customization options.","category":"Sparkline Charts","api":{},"uid":"0012126","order":0,"component":"Sparkline Charts","dir":"sparkline","parentId":"012"}],"order":1,"uid":"012"},{"name":"Smith Chart","directory":"smith-chart","category":"Data Visualization","ftName":"smithchart","samples":[{"url":"default","name":"Default","description":"This demo for Essential JS2 Smith Chart control visualizes two transmissions. Impedance and admittance are the two types of rendering in smith chart.","category":"Smith Chart","api":{},"uid":"0013130","order":0,"component":"Smith Chart","dir":"smith-chart","parentId":"013"},{"url":"custom","name":"Customization","description":"This demo for Essential JS2 Smith Chart control visualizes the properties required to render the smith chart.","category":"Smith Chart","api":{},"uid":"0013131","order":0,"component":"Smith Chart","dir":"smith-chart","parentId":"013"},{"url":"print-export","name":"Print and Export","description":"This demo for Essential JS2 Smith Chart control explores the exporting and printing functionality of smith chart.","category":"Smith Chart","api":{},"uid":"0013132","order":0,"component":"Smith Chart","dir":"smith-chart","parentId":"013"}],"order":1,"uid":"013"},{"name":"Barcode","directory":"barcode","category":"Data Visualization","type":"preview","ftName":"barcode","samples":[{"url":"ean8","name":"EAN-8","description":"This sample visualizes the 8-digit Global Trade Identification Numbers. It was introduced for use on small packages where an EAN-8 barcode would be too large.","category":"Getting Started","uid":"0014140","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code128","name":"Code 128","description":"This sample visualizes a barcode image that presents alphanumeric combinations and it consist of start character, data digits etc.","category":"Getting Started","uid":"0014141","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code128A","name":"Code 128A","description":"This sample visualizes a barcode image that presents information with a combination of numbers, and control characters such as tab and new line.","category":"Getting Started","uid":"0014142","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code128B","name":"Code 128B","description":"This sample visualizes a barcode image that presents information with a combination of numbers, and control characters such as tab and new line.","category":"Getting Started","uid":"0014143","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code128C","name":"Code 128C","description":"This sample visualizes a barcode image that presents information with a combination of numbers, uppercase and lowercase letters, and some additional characters.","category":"Getting Started","uid":"0014144","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code93","name":"Code 93","description":"This sample has a native character set of 26 uppercase letters, 10 digits, and 7 special characters.","category":"Getting Started","uid":"0014145","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code32","name":"Code 32","description":"This sample visualizes the pharmaceutical code that encodes numeric data in a compressed format and supports all numeric digits and all uppercase letters","category":"Getting Started","uid":"0014146","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"codabar","name":"Codabar","description":"This sample visualizes a barcode that is designed to be accurately read even when printed with dot matrix printers.","category":"Getting Started","uid":"0014147","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"ean13","name":"EAN-13","description":"This sample visualizes the 13-digit Global Trade Identification Numbers.It comprises of 13 digits such as  manufacturer code, product code etc","category":"Getting Started","uid":"0014148","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"upca","name":"UPC-A","description":"A UPC-A barcode consists of four areas: number system, manufacturer code, product code, and check digit","category":"Getting Started","uid":"0014149","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"upce","name":"UPC-E","description":"This sample visualizes a product package identification number consist of 6 digits. It is mainly used for scanning products in small packages","category":"Getting Started","uid":"00141410","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code39","name":"Code39","description":"visualizes Code 39, a self-checking barcode symbology that consists of uppercase letters, and several special characters.","category":"Getting Started","uid":"00141411","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"code39Extd","name":"Code 39 Extended","description":"This sample visualizes the model number of an item in the automotive industry.It supports both standard and extended Code 39 barcodes","category":"Getting Started","uid":"00141412","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"qrcode","name":"QR Code","description":"This sample displays a machine-readable optical label that contains information about the item to which it is attached.","category":"Getting Started","uid":"00141413","order":0,"component":"Barcode","dir":"barcode","parentId":"014"},{"url":"datamatrix","name":"Data Matrix","description":"This example shows how to display encoded text or numerical values as the label using the Barcode component","category":"Getting Started","uid":"00141414","order":0,"component":"Barcode","dir":"barcode","parentId":"014"}],"order":1,"uid":"014"},{"name":"Rich Text Editor","type":"update","directory":"rich-text-editor","category":"Editors","samples":[{"url":"tools","name":"Overview","category":"Rich Text Editor","uid":"0015150","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"default","name":"Default Functionalities","category":"Rich Text Editor","uid":"0015151","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"image","name":"Image","category":"Rich Text Editor","uid":"0015152","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"inline","name":"Inline","category":"Rich Text Editor","uid":"0015153","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"paste-cleanup","name":"Paste from MS Word","type":"update","category":"Rich Text Editor","uid":"0015154","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"iframe","name":"IFrame","category":"Rich Text Editor","uid":"0015155","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"print","name":"Print","category":"Rich Text Editor","uid":"0015156","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"ajax-load","name":"Ajax Content","category":"Rich Text Editor","uid":"0015157","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"api","name":"API","category":"Rich Text Editor","uid":"0015158","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"events","name":"Events","category":"Rich Text Editor","uid":"0015159","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"blog-posting","name":"Use Case","category":"Rich Text Editor","uid":"00151510","order":0,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"types","name":"Type","category":"Toolbar","uid":"00151511","order":1,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"insert-emoticons","name":"Insert Emoticons","type":"new","category":"Custom Tool","uid":"00151512","order":2,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"insert-special-characters","name":"Insert Special Characters","category":"Custom Tool","uid":"00151513","order":2,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"markdown-editor","name":"Overview","type":"update","category":"Markdown Editor","uid":"00151514","order":3,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"markdown-preview","name":"Preview","category":"Markdown Editor","uid":"00151515","order":3,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"},{"url":"markdown-format","name":"Custom Format","category":"Markdown Editor","uid":"00151516","order":3,"component":"Rich Text Editor","dir":"rich-text-editor","parentId":"015"}],"order":2,"uid":"015"},{"name":"DocumentEditor","directory":"document-editor","category":"Editors","type":"update","ftName":"document-editor","hideOnDevice":true,"samples":[{"url":"default","name":"Default Functionalities","category":"DocumentEditor","description":"The Document Editor component is used to create, edit, view, and print Word documents in web applications.","uid":"0016160","order":0,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"character-formatting","name":"Character Formatting","category":"Editing Features","description":"The Document Editor supports character formatting such as bold, italic, underline, subscript, superscript, font color, and more.","uid":"0016161","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"paragraph-formatting","name":"Paragraph Formatting","category":"Editing Features","description":"The Document Editor supports paragraph formatting such as indentation, paragraph spacing, line spacing, and text alignment.","uid":"0016162","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"styles","name":"Styles","category":"Editing Features","description":"The Document Editor supports both built-in and custom styles for character format and paragraph format.","uid":"0016163","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"bullets-and-numbering","name":"Bullets and Numbering","category":"Editing Features","description":"The Document Editor supports bullets and numbering. Both single list and multi-level lists can be added.","uid":"0016164","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"links-and-bookmarks","name":"Hyperlinks and Bookmarks","category":"Editing Features","description":"The Document Editor supports hyperlinks and bookmarks. The link can be a file, mail, webpage, or bookmark.","uid":"0016165","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"table-formatting","name":"Table Formatting","category":"Editing Features","description":"The Document Editor supports table formatting such as cell margins, cell spacing, horizontal merge, vertical merge, border styles, background color, and more.","uid":"0016166","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"section-formatting","name":"Section Formatting","category":"Editing Features","description":"The Document Editor supports section formatting such as page size, page margins, header distance and footer distance.","uid":"0016167","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"headers-and-footers","name":"Headers and Footers","category":"Editing Features","description":"The Document Editor supports headers and footers. Different headers and footers can be added to the first page, odd pages, and even pages.","uid":"0016168","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"table-of-contents","name":"Table of Contents","category":"Editing Features","description":"The Document Editor supports table of contents with options for including hyperlink, page number, right-aligned tabs, and styles.","uid":"0016169","order":1,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"print","name":"Print","category":"Print","description":"The Document Editor component is used to view and print Word documents in web applications by injecting only the modules that are necessary.","uid":"00161610","order":2,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"right-to-left","name":"Right To Left","category":"RTL","description":"The Document Editor supports right to left for users who use right-to-left languages (Arabic, Hebrew, Urdu, etc.) in Vue platform.","uid":"00161611","order":3,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"custom-context-menu","name":"Custom Context Menu","category":"Customization","description":"The Document Editor supports custom options for users who use to add custom options in context menu.","uid":"00161612","order":4,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"auto-save","name":"Auto Save","category":"Customization","type":"new","description":"The Document Editor supports auto save functionality to let the users for saving the documents automatically at customized time interval.","uid":"00161613","order":4,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"chart","name":"Chart Preservation","category":"Charts","type":"new","description":"The Document Editor supports chart preservation for users who use to view their business reports with intuitive graphical data visualization.","uid":"00161614","order":5,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true},{"url":"document-protection","name":"Document Protection","category":"Security","type":"new","description":"The Document Editor provides document protection supports to restrict the types of changes can be made to the document by a user/user group.","uid":"00161615","order":6,"component":"DocumentEditor","dir":"document-editor","parentId":"016","hideOnDevice":true}],"order":2,"uid":"016"},{"name":"Chips","directory":"chips","category":"Editors","samples":[{"url":"default","name":"Default Functionalities","category":"Chips","uid":"0017170","order":0,"component":"Chips","dir":"chips","parentId":"017"},{"url":"api","name":"API","category":"Chips","uid":"0017171","order":0,"component":"Chips","dir":"chips","parentId":"017"}],"order":2,"uid":"017"},{"name":"Button","directory":"button","category":"Editors","samples":[{"url":"default","name":"Default Functionalities","category":"Button","ftName":"button","api":{"Button":["isPrimary","cssClass","iconCss","isToggle","iconPosition","content"]},"description":"This example demonstrates the types (flat, toogle, outline, round), sizes and styles (primary, success, info, warning) of the Syncfusion Vue Button.","uid":"0018180","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"button-group","name":"Button Group","category":"Button","ftName":"button-group","description":"This example demonstrates the behaviors (default, checkbox, radio) of the Syncfusion Vue ButtonGroup.","uid":"0018181","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"checkbox","name":"Checkbox","category":"Button","ftName":"checkbox","api":{"CheckBox":["label","checked","indeterminate","disabled","change"]},"description":"This example demonstrates the three different states (checked, unchecked, indeterminate) of the Syncfusion Vue CheckBox.","uid":"0018182","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"radio-button","name":"Radio Button","category":"Button","ftName":"radio-button","api":{"RadioButton":["label","name","value","checked"]},"description":"This example demonstrates the group functionality of the Syncfusion Vue RadioButton with checked and unchecked states.","uid":"0018183","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"dropdown-button","name":"Dropdown Menu","category":"Button","ftName":"dropdown-menu","api":{"DropDownButton":["items","cssClass","iconCss"]},"description":"This example demonstrates the usecases of the Syncfusion Vue DropDownMenu with icons, text and separator in popup action items.","uid":"0018184","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"split-button","name":"Split Button","category":"Button","ftName":"split-button","api":{"SplitButton":["items","content","iconCss","beforeItemRender"]},"description":"This example demonstrates the usecases of the Syncfusion Vue SplitButton with icons and text in primary splitbutton.","uid":"0018185","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"switch","name":"Switch","category":"Button","ftName":"toggle-switch-button","api":{"Switch":["checked","disabled"]},"description":"This example demonstrates the toggle states (checked, unchecked) of the Syncfusion Vue Switch.","uid":"0018186","order":0,"component":"Button","dir":"button","parentId":"018"},{"url":"progress-button","name":"Progress Button","category":"Button","ftName":"progress-button","api":{"ProgressButton":["content","iconCss","cssClass","duration","disabled","isPrimary","enableProgress","end","begin","spinSettings","animationSettings"]},"description":"This example demonstrates the different functionalities of the Syncfusion Vue ProgressButton with spinner and progress indicator.","uid":"0018187","order":0,"component":"Button","dir":"button","parentId":"018"}],"order":2,"uid":"018"},{"name":"InPlaceEditor","directory":"inplace-editor","ftName":"inplace-editor","category":"Editors","samples":[{"url":"default","name":"Overview","category":"InPlaceEditor","description":"This sample demonstrates the default behavior of the In-place Editor component, which works by editing the values in inline and popup in Vue platform.","uid":"0019190","order":0,"component":"InPlaceEditor","dir":"inplace-editor","parentId":"019"},{"url":"dropdowns","name":"Dropdown Components","category":"InPlaceEditor","description":"This sample demonstrates the usage of dropdown components such as Autocomplete, ComboBox, DropDownList, and MultiSelect in Vue platform.","uid":"0019191","order":0,"component":"InPlaceEditor","dir":"inplace-editor","parentId":"019"},{"url":"pickers","name":"Date Components","category":"InPlaceEditor","description":"This sample demonstrates the usage of picker components such as Date, Time, DateTime, and DateRange in Vue platform.","uid":"0019192","order":0,"component":"InPlaceEditor","dir":"inplace-editor","parentId":"019"},{"url":"edit-post","name":"Edit Post","category":"Use Case","description":"This sample demonstrates the usage of In-place Editor component with a form element in Vue platform. Edit the values in place to update to the post.","uid":"0019193","order":1,"component":"InPlaceEditor","dir":"inplace-editor","parentId":"019"}],"order":2,"uid":"019"},{"name":"Scheduler","directory":"schedule","category":"Calendars","type":"update","ftName":"scheduler","samples":[{"url":"default","name":"Default Functionalities","category":"Scheduler","description":"This demo for Essential JS2 Scheduler control shows how the flat Scheduler looks like with its default set of minimal configurations.","api":{"Schedule":["height","eventSettings","selectedDate"]},"uid":"0020200","order":0,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"local-data","name":"Local Data","category":"Data Binding","description":"This demo for Essential JS2 Scheduler control shows the way of binding an array of JavaScript objects (local JSON datasource).","api":{"Schedule":["eventSettings","selectedDate"]},"uid":"0020201","order":1,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"remote-data","name":"Remote Data","category":"Data Binding","description":"This demo for Essential JS2 Scheduler control shows the way of binding remote services by using the DataManager.","api":{"Schedule":["eventSettings","selectedDate"]},"uid":"0020202","order":1,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"calendar-integration","name":"Sync Google Calendar","category":"Data Binding","description":"This example shows how to integrate Google Calendar events into Vue Scheduler.","api":{"Schedule":["eventSettings","dataBinding","selectedDate"]},"uid":"0020203","order":1,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"recurrence-events","name":"Recurring Events","category":"Appointments","type":"update","description":"This demo for Essential JS2 Scheduler control shows the scheduler with recurring meetings handled on a regular pattern.","api":{"Schedule":["width","height","currentView","selectedDate","eventSettings"]},"uid":"0020204","order":2,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"block-events","name":"Blocking Dates and Time","category":"Appointments","description":"This example shows how to block specific days or time intervals on Vue Scheduler","api":{"Schedule":["width","height","currentView","selectedDate","eventSettings"]},"uid":"0020205","order":2,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"search-events","name":"Search Events","category":"Appointments","description":"This example shows how to search the scheduler events based on specific field criteria.","api":{"Schedule":["width","height","currentView","selectedDate","eventSettings"]},"uid":"0020206","order":2,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"timezone","name":"Timezone","category":"Appointments","description":"This demo for Essential JS2 Scheduler control shows how the events are displayed in different timings as per the selected timezone.","api":{"Schedule":["timezone","selectedDate","eventSettings","eventRendered"]},"uid":"0020207","order":2,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"external-dragdrop","name":"External Drag and Drop","category":"Appointments","description":"This example shows how to drag and drop the events from an external source into Vue scheduler.","api":{"Schedule":["currentView","eventSettings","resourceHeaderTemplate","cssClass","workHours","views","group","resources","actionBegin"]},"uid":"0020208","order":2,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"virtual-scrolling","name":"Virtual Scrolling ","category":"Scrolling","description":"This example illustrates how to enable the virtual loading of resources and its events in Vue Scheduler.","api":{"Schedule":["views","group","resources","eventSettings"]},"uid":"0020209","order":3,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"views","name":"Basic Views","category":"Views","description":"This demo for Essential JS2 Scheduler control shows the usage of basic views such as Day, Week, Work Week and Month.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202010","order":4,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"timeline","name":"Timeline Views","category":"Views","description":"This demo for Essential JS2 Scheduler control shows how the timeline scheduler looks like with its default set of configurations.","api":{"Schedule":["height","eventSettings","selectedDate"]},"uid":"00202011","order":4,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"agenda","name":"Agenda View","category":"Views","description":"This demo for Essential JS2 Scheduler control shows the agenda view and the configurations available in it.","api":{"Schedule":["agendaDaysCount","hideEmptyAgendaDays","currentView","views","eventSettings","selectedDate"]},"uid":"00202012","order":4,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"month-agenda","name":"Month Agenda View","category":"Views","description":"This demo for Essential JS2 Scheduler control shows the layout of Month Agenda view and how it works.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202013","order":4,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"view-configuration","name":"Individual View Settings","category":"Views","description":"This demo for Essential JS2 Scheduler control shows how to customize each of the view with specific configurations.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202014","order":4,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"extended-views","name":"View Intervals","category":"Views","description":"This demo for Essential JS2 Scheduler control shows how to display n number of days, weeks and months on a single view.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202015","order":4,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"timeline-resource","name":"Room Scheduler","category":"Multiple Resources","description":"This demo for Essential JS2 Scheduler control shows how to design the room scheduling calendar and manage the events booked on a particular time interval.","api":{"Schedule":["currentView","views","selectedDate","resourceHeaderTemplate","eventSettings"]},"uid":"00202016","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"resources","name":"Fare Calendar","category":"Multiple Resources","description":"This demo for Essential JS2 Scheduler control shows how to customize the scheduler to showcase it as an Airfare calendar.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202017","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"resource","name":"Resources","category":"Multiple Resources","description":"This example depicts how to show or hide the resource events on JavaScript Scheduler based on the resource selection.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202018","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"group-editing","name":"Shared Events","category":"Multiple Resources","description":"This demo for Essential JS2 Scheduler control shows the usage of single event that are shared by multiple resources.","api":{"Schedule":["resourceHeaderTemplate","group","resources","eventSettings"]},"uid":"00202019","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"group-customworkdays","name":"Different Work Days","category":"Multiple Resources","description":"This demo for Essential JS2 Scheduler control shows how to set different working days for each of the resources.","api":{"Schedule":["resourceHeaderTemplate","group","resources","eventSettings"]},"uid":"00202020","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"addremove-resources","name":"Show/Hide Resources","category":"Multiple Resources","description":"This demo for Essential JS2 Scheduler control shows how to dynamically add or remove the resources to and from the scheduler layout.","api":{"Schedule":["currentView","views","selectedDate","eventSettings"]},"uid":"00202021","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"adaptive-rows","name":"Row Auto Height","category":"Multiple Resources","description":"This example showcases how the work cells of Essential JS2 Scheduler auto adjusts its height based on the exceeding appointment count.","api":{"Schedule":["currentView","views","selectedDate","eventSettings","rowAutoHeight"]},"uid":"00202022","order":5,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"resource-grouping","name":"Horizontal Grouping","category":"Resource Grouping","description":"This demo for Essential JS2 Scheduler control shows how the calendars of multiple resources are grouped in default view layouts.","api":{"Schedule":["resourceHeaderTemplate","group","resources","eventSettings"]},"uid":"00202023","order":6,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"timeline-resourcegrouping","name":"Timeline Grouping","category":"Resource Grouping","description":"This demo for Essential JS2 Scheduler control shows how the calendars of multiple resources are grouped in timeline view layouts.","api":{"Schedule":["group","resources","eventSettings"]},"uid":"00202024","order":6,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"group-bydate","name":"Date-wise Grouping  ","category":"Resource Grouping","description":"This demo for Essential JS2 Scheduler control shows how the resources are grouped under each date.","api":{"Schedule":["group","resources","eventSettings"]},"uid":"00202025","order":6,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"group-bychild","name":"Hierarchical Grouping ","category":"Resource Grouping","description":"This demo for Essential JS2 Scheduler control shows how to group the child level resources against each of the parent level resources.","api":{"Schedule":["startHour","endHour","group","resources","eventSettings"]},"uid":"00202026","order":6,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"cell-template","name":"Cell","category":"Templates","description":"This demo for Essential JS2 Scheduler control shows how to customize the background of the specific cells using cell template option.","api":{"Schedule":["width","height","cellTemplate","views","eventSettings","selectedDate"]},"uid":"00202027","order":7,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"dateheader-template","name":"Date Header","category":"Templates","description":"This demo for Essential JS2 Scheduler control shows how to customize the date header cells using the template option.","api":{"Schedule":["cssClass","dateHeaderTemplate","eventSettings","eventRendered","renderCell"]},"uid":"00202028","order":7,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"events-template","name":"Events","category":"Templates","description":"This demo for Essential JS2 Scheduler control shows how to customize the appearance of events using event template option.","api":{"Schedule":["width","height","cellTemplate","views","eventSettings","selectedDate"]},"uid":"00202029","order":7,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"tooltip","name":"Tooltip","category":"Templates","description":"This demo for Essential JS2 Scheduler control shows how to display tooltip over events as well as the way to customize it using template option.","api":{"Schedule":["width","height","eventSettings","selectedDate"]},"uid":"00202030","order":7,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"editor-validation","name":"Field Validation","category":"Editor Window","description":"This demo for Essential JS2 Scheduler control shows the way of adding default and custom validation rules to the editor fields of scheduler.","api":{"Schedule":["width","height","eventSettings","selectedDate"]},"uid":"00202031","order":8,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"editor-customfields","name":"Additional Fields","category":"Editor Window","description":"This demo for Essential JS2 Scheduler control shows how to add additional fields to the default editor window.","api":{"Schedule":["selectedDate","eventSettings","popupOpen"]},"uid":"00202032","order":8,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"editor-template","name":"Editor Template","category":"Editor Window","description":"This demo for Essential JS2 Scheduler control shows the way of customizing the default editor window with custom template design.","api":{"Schedule":["editorTemplate","showQuickInfo","eventRendered","popupOpen","actionBegin"]},"uid":"00202033","order":8,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"header-rows","name":"Header Rows","category":"Customization","description":"This demo for Essential JS2 Scheduler control shows how to display the additional header rows on timeline view.","api":{"Schedule":["height","eventSettings","selectedDate","headerRows"]},"uid":"00202034","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"time-scale","name":"Timescale","category":"Customization","description":"This demo for Essential JS2 Scheduler control shows how to customize the grid lines of scheduler with different duration and count","api":{"Schedule":["height","width","views","timeScale"]},"uid":"00202035","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"context-menu","name":"Context Menu","category":"Customization","description":"This example shows how to enable the context menu on Vue Scheduler and perform the related actions using menu options.","api":{"Schedule":["width","height","eventSettings","selectedDate"]},"uid":"00202036","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"header-bar","name":"Header Bar","category":"Customization","description":"This demo for Essential JS2 Scheduler control shows the way of adding custom items onto the scheduler header bar.","api":{"Schedule":["width","height","workHours","views","eventSettings","selectedDate"]},"uid":"00202037","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"scroll-to","name":"Scroll Time","category":"Customization","description":"This demo for Essential JS2 Scheduler control shows the way of manually scrolling to specific time on scheduler.","api":{"Schedule":["width","height","eventSettings","eventRendered","scrollTo"]},"uid":"00202038","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"work-days","name":"Work Days","category":"Customization","description":"This demo for Essential JS2 Scheduler control showcases how to set customized working days as well as first day of a week on scheduler.","api":{"Schedule":["workDays","views","eventSettings","selectedDate"]},"uid":"00202039","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"hide-weekend","name":"Hide Non-Working Days","category":"Customization","description":"This demo for Essential JS2 Scheduler control depicts the way to show or hide the weekend days of a week.","api":{"Schedule":["showWeekend"]},"uid":"00202040","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"work-hours","name":"Work Hours","category":"Customization","description":"This demo for Essential JS2 Scheduler control showcases how to set the work hour range on scheduler.","api":{"Schedule":["workHours","views","eventSettings","selectedDate"]},"uid":"00202041","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"startend-hour","name":"Day Hour Limit","category":"Customization","description":"This demo for Essential JS2 Scheduler control depicts how to restrict the start and end hours on scheduler.","api":{"Schedule":["startHour","endHour","workHours","eventRendered"]},"uid":"00202042","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"cell-dimension","name":"Cell Dimension","category":"Customization","type":"update","description":"This demo for Essential JS2 Scheduler control shows how to set the width and height of the cells by overriding the default CSS classes.","api":{"Schedule":["cssClass","showTimeIndicator","eventRendered","created","actionComplete"]},"uid":"00202043","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"read-only","name":"Read-only Events","category":"Customization","description":"This demo for Essential JS2 Scheduler control shows how to make specific events on the scheduler to be displayed in a read-only mode.","api":{"Schedule":["eventSettings","eventRendered","eventClick","popupOpen","eventRendered"]},"uid":"00202044","order":9,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"excel-export","name":"Excel Exporting","category":"Exporting","description":"This example demonstrates how to export the Essential JS2 Scheduler events to the excel file format at client-side.","api":{"Schedule":["width","height","currentView","selectedDate","eventSettings"]},"uid":"00202045","order":10,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"calendar-export-import","name":"Export and Import ICS","category":"Exporting","description":"This example shows how to export the Scheduler events to a calendar file, and also how to import events from an .ics file into our Essential JS2 Scheduler.","api":{"Schedule":["importICalendar","exportToICalendar"]},"uid":"00202046","order":10,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"print","name":"Print","category":"Exporting","type":"new","description":"This example demonstrates how to print the Essential JS2 Scheduler element at client-side with themes enabled.","api":{"Schedule":["width","height","currentView","selectedDate","eventSettings"]},"uid":"00202047","order":10,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"receditor-generaterule","name":"Rule Generator","category":"Recurrence Editor","description":"This demo for Essential JS2 Scheduler control showcases the recurrence rule generation based on the options selected from the recurrence editor.","uid":"00202048","order":11,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"receditor-populaterule","name":"Populate Rule","category":"Recurrence Editor","description":"This demo for Essential JS2 Scheduler control shows how to fill the recurrence editor fields with values based on the provided recurrence rule string.","uid":"00202049","order":11,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"keyboard-interaction","name":"Keyboard Interaction","category":"Miscellaneous","description":"This demo for Essential JS2 Scheduler control showcases the keyboard shortcuts available on scheduler.","api":{"Schedule":["width","height","eventSettings","selectedDate","allowKeyboardInteraction"]},"uid":"00202050","order":12,"component":"Scheduler","dir":"schedule","parentId":"020"},{"url":"events","name":"Events","category":"Miscellaneous","description":"This demo for Essential JS2 Scheduler control shows the client-side events that triggers on respective scheduler actions.","api":{"Schedule":["width","height","eventSettings","eventRendered","created","actionBegin","actionComplete","actionFailure","cellClick","cellDoubleClick","destroyed","navigating","eventClick","popupOpen"]},"uid":"00202051","order":12,"component":"Scheduler","dir":"schedule","parentId":"020"}],"order":3,"uid":"020"},{"name":"Gantt","directory":"gantt","category":"Calendars","ftName":"gantt","type":"preview","hideOnDevice":true,"samples":[{"url":"default","name":"Default Functionalities","category":"Gantt","api":{"Gantt":["dataSource","taskSettings","height","highlightWeekends","eventMarkers"]},"description":"This example demonstrates the simple Gantt chart with summary task, child tasks, milestone tasks, dependencies with event markers of project","uid":"0021210","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"remote-data","name":"Remote Data","category":"Gantt","api":{"Gantt":["dataSource","height","taskSettings","columns","treeColumnIndex","allowSelection","gridLines","highlightWeekends","timelineSettings","labelSettings","includeWeekend","projectStartDate","projectEndDate"]},"description":"This sample demonstrates the way of binding data to Gantt chart with remote service. The Gantt chart data source is bound to remote data using DataManager.","uid":"0021211","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"editing","name":"Editing","category":"Gantt","api":{"Gantt":["dataSource","dateFormat","height","taskSettings","editSettings","toolbar","columns","treeColumnIndex","allowSelection","gridLines","resourceNameMapping","resourceIdMapping","resources","highlightWeekends","timelineSettings","labelSettings","labelSettings","projectStartDate","projectEndDate"]},"description":"This example demonstrates the cell editing, dialog editing, taskbar editing and dependency editing support in Gantt","uid":"0021212","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"filtering","name":"Filtering","category":"Gantt","api":{"Gantt":["dataSource","dateFormat","taskSettings","columns","treeColumnIndex","height","timelineSettings","labelSettings","toolbar","allowFiltering","includeWeekend","timelineSettings","splitterSettings","durationUnit","dayWorkingTime","projectStartDate","projectEndDate"]},"description":"This example demonstrates the filtering support with filter menu option for various types of columns in Gantt","uid":"0021213","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"timeline","name":"Timeline","category":"Gantt","api":{"Gantt":["dataSource","taskSettings","treeColumnIndex","height","projectStartDate","projectEndDate","highlightWeekends","resourceNameMapping","resourceIdMapping","resources","timelineSettings","splitterSettings","treeColumnIndex","labelSettings","eventMarkers"]},"description":"This example demonstrates the various timeline mode options and properties available to customize the timeline in Gantt","uid":"0021214","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"baseline","name":"Baseline","category":"Gantt","api":{"Gantt":["dataSource","renderBaseline","taskSettings","columns","treeColumnIndex","allowSelection","includeWeekend","timelineSettings","tooltipSettings","durationUnit","dateFormat","dayWorkingTime","height","projectStartDate","projectEndDate"]},"description":"Baselines are enabled to view the deviation between the planned dates of tasks and actual progress of task dates","uid":"0021215","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"taskbar-template","name":"Taskbar Template","category":"Gantt","api":{"Gantt":["dataSource","dateFormat","taskFields","columns","treeColumnIndex","rowHeight","taskbarHeight","dayWorkingTime","durationUnit","eventMarkers","height","taskbarTemplate","milestoneTemplate","projectStartDate","projectEndDate","timelineSettings","splitterSettings","labelSettings","tooltipSettings"]},"description":"This example demonstrates the taskbar template support with child taskbar template, parent taskbar template and milestone template.","uid":"0021216","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"unscheduled-task","name":"Unscheduled Tasks","category":"Gantt","api":{"Gantt":["dataSource","taskFields","editSettings","toolbar","height","labelSettings","allowUnscheduledTasks","projectStartDate","projectEndDate","toolbarClick"]},"description":"This example demonstrates the unscheduled tasks in Gantt with custom toolbar item and dynamic add support.","uid":"0021217","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"zooming","name":"Zooming","category":"Gantt","api":{"Gantt":["dataSource","height","taskSettings","toolbar","projectStartDate","projectEndDate"]},"description":"This example demonstrates the zooming support of the Gantt chart timeline and ZoomToFit support of the Gantt chart.","uid":"0021218","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true},{"url":"context-menu","name":"Context Menu","category":"Gantt","api":{"Gantt":["dataSource","dateFormat","height","taskSettings","editSettings","toolbar","columns","treeColumnIndex","allowSelection","gridLines","resourceNameMapping","resourceIdMapping","resources","highlightWeekends","timelineSettings","labelSettings","labelSettings","projectStartDate","projectEndDate","enableContextMenu","contextMenuItems"]},"description":"This demo explains the usage of context menu and the default context menu items in Syncfusion Gantt control.","uid":"0021219","order":0,"component":"Gantt","dir":"gantt","parentId":"021","hideOnDevice":true}],"order":3,"uid":"021"},{"name":"Calendar","directory":"calendar","category":"Calendars","samples":[{"url":"default","name":"Default Functionalities","category":"Calendar","api":{"Calendar":["change"]},"description":"This example demonstrates a simple, mobile-friendly and responsive Vue Calendar to select a date","uid":"0022220","order":0,"component":"Calendar","dir":"calendar","parentId":"022"},{"url":"disabled","name":"Disabled Dates","category":"Calendar","api":{"Calendar":["renderDayCell","change"]},"description":"This example demonstrates how to disable the dates like weekends, weekdays and specific dates (past dates, future dates and current dates) in a Vue Calendar","uid":"0022221","order":0,"component":"Calendar","dir":"calendar","parentId":"022"},{"url":"date-range","name":"Date Range","category":"Calendar","api":{"Calendar":["min","max","change"]},"description":"This example demonstrates how to disables the specific range of dates (min and max) in a Vue Calendar","uid":"0022222","order":0,"component":"Calendar","dir":"calendar","parentId":"022"},{"url":"special-dates","name":"Special Dates","category":"Calendar","api":{"Calendar":["renderDayCell","change"]},"description":"This example demonstrates how to highlight the specific dates like weekends, holidays and special dates in a Vue Calendar","uid":"0022223","order":0,"component":"Calendar","dir":"calendar","parentId":"022"},{"url":"multi-select","name":"Multiple Selection","category":"Calendar","api":{"Calendar":["isMultiSelection","values"]},"uid":"0022224","order":0,"component":"Calendar","dir":"calendar","parentId":"022"},{"url":"month-picker","name":"Month Picker","category":"Calendar","api":{"Calendar":["start","depth"]},"description":"The Vue Calendar component can act as a month and year picker. It helps you to select a month or year quickly with all month related properties","uid":"0022225","order":0,"component":"Calendar","dir":"calendar","parentId":"022"},{"url":"islamic-calendar","name":"Islamic Calendar","category":"Calendar","api":{"Calendar":["isMultiSelection","value","min","max"]},"uid":"0022226","order":0,"component":"Calendar","dir":"calendar","parentId":"022"}],"order":3,"uid":"022"},{"name":"DatePicker","directory":"datepicker","category":"Calendars","samples":[{"url":"default","name":"Default Functionalities","category":"DatePicker","api":{"DatePicker":["placeholder"]},"description":"This example demonstrates a simple, mobile-friendly and responsive Vue DatePicker to select a date","uid":"0023230","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"},{"url":"disabled","name":"Disabled Dates","category":"DatePicker","api":{"DatePicker":["placeholder","renderDayCell"]},"description":"This example demonstrates how to disable the dates like weekends, weekdays and specific dates (past dates, future dates and current dates) in a Vue DatePicker","uid":"0023231","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"},{"url":"date-range","name":"Date Range","category":"DatePicker","api":{"DatePicker":["min","max","value","placeholder"]},"description":"This example demonstrates how to disables the specific range of dates (min and max) in a Vue DatePicker","uid":"0023232","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"},{"url":"date-format","name":"Format","category":"DatePicker","api":{"DatePicker":["format","value","placeholder"]},"description":"This example demonstrates how to change the date time format in the input field based on the format in a Vue DatePicker","uid":"0023233","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"},{"url":"special-dates","name":"Special Dates","category":"DatePicker","api":{"DatePicker":["value","placeholder","renderDayCell"]},"description":"This example demonstrates how to highlight the specific dates like weekends, holidays and special dates in a Vue DatePicker","uid":"0023234","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"},{"url":"month-picker","name":"Month Picker","category":"DatePicker","api":{"DatePicker":["start","depth"]},"description":"The Vue DatePicker component can act as a month and year picker. It helps you to select a month or year quickly with all months related properties.","uid":"0023235","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"},{"url":"two-way","name":"Two-Way Binding","category":"DatePicker","api":{"DatePicker":["value"]},"uid":"0023236","order":0,"component":"DatePicker","dir":"datepicker","parentId":"023"}],"order":3,"uid":"023"},{"name":"DateRangePicker","directory":"daterangepicker","category":"Calendars","samples":[{"url":"default","name":"Default Functionalities","category":"DateRangePicker","api":{"DateRangePicker":["placeholder"]},"description":"This example demonstrates a simple, mobile-friendly and responsive JavaScript DateRangePicker to select a range of dates (startDate and endDate)","uid":"0024240","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"},{"url":"day-span","name":"Day Span","category":"DateRangePicker","api":{"DateRangePicker":["placeholder","minDays","maxDays"]},"description":"This example demonstrates how to restrict the users to select the minimum and maximum number of days (minspan and maxspan) between the selected range of start and end dates","uid":"0024241","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"},{"url":"date-range","name":"Date Range","category":"DateRangePicker","api":{"DateRangePicker":["placeholder","min","max"]},"description":"This example demonstrates how to disables the specific range of dates (min and max) in a Vue DateRangePicker","uid":"0024242","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"},{"url":"date-format","name":"Format","category":"DateRangePicker","api":{"DateRangePicker":["format","value"]},"description":"This example demonstrates how to change the date time format in the input field based on the format in a Vue DateRangePicker","uid":"0024243","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"},{"url":"presets","name":"Presets","category":"DateRangePicker","api":{"DateRangePicker":["placeholder","presets"]},"description":"This example demonstrates how to specify the predefined custom date ranges (presets range) like last month, last year and current week in the dropdown popup","uid":"0024244","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"},{"url":"month-range-picker","name":"Month Range Picker","category":"DateRangePicker","api":{"DateRangePicker":["start","depth"]},"description":"The Vue DateRangePicker component can act as a month and year picker. It helps you to select a month or year quickly with all months related properties.","uid":"0024245","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"},{"url":"two-way","name":"Two-Way Binding","category":"DateRangePicker","api":{"DateRangePicker":["value"]},"uid":"0024246","order":0,"component":"DateRangePicker","dir":"daterangepicker","parentId":"024"}],"order":3,"uid":"024"},{"name":"DateTimePicker","directory":"datetimepicker","category":"Calendars","samples":[{"url":"default","name":"Default Functionalities","category":"DateTimePicker","api":{"DateTimePicker":[]},"description":"This example demonstrates a simple, mobile-friendly and responsive Vue DateTimePicker to select both a date and time","uid":"0025250","order":0,"component":"DateTimePicker","dir":"datetimepicker","parentId":"025"},{"url":"disabled","name":"Disabled Dates","category":"DateTimePicker","api":{"DateTimePicker":["renderDayCell"]},"description":"This example demonstrates how to disable the dates and times like weekends, weekdays and specific dates (past dates, future dates and current dates) in a Vue DateTimePicker","uid":"0025251","order":0,"component":"DateTimePicker","dir":"datetimepicker","parentId":"025"},{"url":"date-time-range","name":"DateTime Range","category":"DateTimePicker","api":{"DatePicker":["min","max","value"]},"description":"This example demonstrates how to disables the specific range of dates and times (min and max) in a Vue DateTimePicker","uid":"0025252","order":0,"component":"DateTimePicker","dir":"datetimepicker","parentId":"025"},{"url":"date-time-format","name":"Format","category":"DateTimePicker","api":{"DateTimePicker":["format","value"]},"description":"This example demonstrates how to change the date and time format in the input field based on the format in a Vue DateTimePicker","uid":"0025253","order":0,"component":"DateTimePicker","dir":"datetimepicker","parentId":"025"},{"url":"special-dates","name":"Special Dates","category":"DateTimePicker","api":{"DateTimePicker":["renderDayCell","value"]},"description":"This example demonstrates how to highlight the specific dates and times like weekends, holidays and special dates in a Vue DateTimePicker","uid":"0025254","order":0,"component":"DateTimePicker","dir":"datetimepicker","parentId":"025"},{"url":"two-way","name":"Two-Way Binding","category":"DateTimePicker","api":{"DateTimePicker":["value"]},"uid":"0025255","order":0,"component":"DateTimePicker","dir":"datetimepicker","parentId":"025"}],"order":3,"uid":"025"},{"name":"TimePicker","directory":"timepicker","category":"Calendars","samples":[{"url":"default","name":"Default Functionalities","category":"TimePicker","api":{"TimePicker":["placeholder"]},"description":"This example demonstrates a simple, mobile-friendly and responsive Vue TimePicker to select a time","uid":"0026260","order":0,"component":"TimePicker","dir":"timepicker","parentId":"026"},{"url":"time-format","name":"Format","category":"TimePicker","api":{"TimePicker":["value","step","format"]},"description":"This example demonstrates how to disable the specific range of times(min and max) in a Vue TimePicker","uid":"0026261","order":0,"component":"TimePicker","dir":"timepicker","parentId":"026"},{"url":"time-range","name":"Time Range","category":"TimePicker","api":{"TimePicker":["placeholder","value","readonly","enabled","min","change"]},"description":"This example demonstrates how to change the time format in the input field based on the format in a Vue TimePicker","uid":"0026262","order":0,"component":"TimePicker","dir":"timepicker","parentId":"026"},{"url":"list-formatting","name":"Time Duration","category":"TimePicker","api":{"TimePicker":["value","itemRender"]},"description":"This example demonstrates how to disable specific times like past time, current time in a Vue TimePicker","uid":"0026263","order":0,"component":"TimePicker","dir":"timepicker","parentId":"026"},{"url":"two-way","name":"Two-Way Binding","category":"TimePicker","api":{"TimePicker":["value"]},"uid":"0026264","order":0,"component":"TimePicker","dir":"timepicker","parentId":"026"}],"order":3,"uid":"026"},{"name":"AutoComplete","directory":"auto-complete","type":"update","category":"Dropdowns","samples":[{"url":"default","name":"Default Functionalities","category":"AutoComplete","description":"This example demonstrates the default functionalities of the Vue autocomplete component with minimum configuration.","sourceFiles":[{"displayName":"default.vue","path":"src/auto-complete/default.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027270","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"grouping-icon","name":"Grouping and Icons","category":"AutoComplete","description":"This example demonstrates how to group based on the different categories with individual header and icon support using the Vue autocomplete component.","sourceFiles":[{"displayName":"grouping-icon.vue","path":"src/auto-complete/grouping-icon.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027271","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"data-binding","name":"Data Binding","category":"AutoComplete","description":"This example demonstrates how to bind with local data source and fetch data from remote data service in the Vue autocomplete component.","sourceFiles":[{"displayName":"data-binding.vue","path":"src/auto-complete/data-binding.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027272","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"template","name":"Template","category":"AutoComplete","description":"This example demonstrates how to customize the appearance of each item in the Vue autocomplete component pop-up list using template.","sourceFiles":[{"displayName":"template.vue","path":"src/auto-complete/template.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027273","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"highlight","name":"Highlight","category":"AutoComplete","description":"This example demonstrates how to highlight the searched characters in the suggested list items of the Vue autocomplete component.","sourceFiles":[{"displayName":"highlight.vue","path":"src/auto-complete/highlight.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027274","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"custom-filtering","name":"Custom Filtering","category":"AutoComplete","description":"This example demonstrates how to achieve the custom filtering functionalities in the Vue autocomplete component.","sourceFiles":[{"displayName":"custom-filtering.vue","path":"src/auto-complete/custom-filtering.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027275","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"diacritics-filtering","name":"Diacritics Filtering","category":"AutoComplete","description":"This example demonstrates how to achieve the diacritics filter functionalities in the Vue autocomplete component.","sourceFiles":[{"displayName":"diacritics-filtering.vue","path":"src/auto-complete/diacritics-filtering.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027276","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"},{"url":"two-way-binding","name":"Two-way-Binding","category":"AutoComplete","type":"new","description":"The Vue Autocomplete component supports two-way data binding using the v-model attribute of Vue directive. It helps to achieve in sync with data in the DOM. ","sourceFiles":[{"displayName":"two-way.vue","path":"src/auto-complete/two-way-binding.vue"},{"displayName":"dataSource.json","path":"src/auto-complete/dataSource.json"}],"uid":"0027277","order":0,"component":"AutoComplete","dir":"auto-complete","parentId":"027"}],"order":4,"uid":"027"},{"name":"ComboBox","directory":"combo-box","type":"update","category":"Dropdowns","samples":[{"url":"default","name":"Default Functionalities","category":"ComboBox","description":"This example demonstrates the default functionalities of the Vue combo box component with minimum configuration.","sourceFiles":[{"displayName":"default.vue","path":"src/combo-box/default.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028280","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"grouping-icon","name":"Grouping and Icons","category":"ComboBox","description":"This example demonstrates the default functionalities of the Vue combo box component with minimum configuration.","sourceFiles":[{"displayName":"grouping-icon.vue","path":"src/combo-box/grouping-icon.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028281","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"data-binding","name":"Data Binding","category":"ComboBox","description":"This example demonstrates how to bind with local data source and fetch data from remote data service in the Vue combo box component.","sourceFiles":[{"displayName":"data-binding.vue","path":"src/combo-box/data-binding.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028282","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"custom-value","name":"Custom Value","category":"ComboBox","description":"This example demonstrates the addition of a new value that is not present in the predefined list of the Vue combo box component.","sourceFiles":[{"displayName":"custom-value.vue","path":"src/combo-box/custom-value.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028283","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"template","name":"Template","category":"ComboBox","description":"This example demonstrates how to customize the appearance of each item in the Vue combo box component pop-up list using the template.","sourceFiles":[{"displayName":"template.vue","path":"src/combo-box/template.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028284","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"filtering","name":"Filtering","category":"ComboBox","description":"This example demonstrates how the filtering functionalities works based on the typed characters in the Vue combo box component.","sourceFiles":[{"displayName":"filtering.vue","path":"src/combo-box/filtering.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028285","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"cascading","name":"Cascading","category":"ComboBox","description":"This example demonstrates how to create a related combo box (Cascading ComboBox) using the Vue combo box component.","sourceFiles":[{"displayName":"cascading.vue","path":"src/combo-box/cascading.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028286","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"diacritics-filtering","name":"Diacritics Filtering","category":"ComboBox","description":"This example demonstrates how to achieve the diacritics filter functionalities in the Vue combo box component.","sourceFiles":[{"displayName":"diacritics-filtering.vue","path":"src/combo-box/diacritics-filtering.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028287","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"},{"url":"two-way-binding","name":"Two-way Binding","category":"ComboBox","type":"new","description":"The Vue Combo Box component supports two-way data binding using the v-model attribute of Vue directive. It helps to achieve sync with data in the DOM.","sourceFiles":[{"displayName":"two-way.vue","path":"src/combo-box/two-way-binding.vue"},{"displayName":"dataSource.json","path":"src/combo-box/dataSource.json"}],"uid":"0028288","order":0,"component":"ComboBox","dir":"combo-box","parentId":"028"}],"order":4,"uid":"028"},{"name":"Dropdown List","directory":"drop-down-list","type":"update","category":"Dropdowns","samples":[{"url":"default","name":"Default Functionalities","category":"Dropdown List","description":"This example demonstrates the default functionalities of the Vue drop-down list component with minimum configuration.","sourceFiles":[{"displayName":"default.vue","path":"src/drop-down-list/default.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029290","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"grouping-icon","name":"Grouping and Icons","category":"Dropdown List","description":"This example demonstrates how to group based on the different categories with individual header and icon support using Vue drop-down list component.","sourceFiles":[{"displayName":"grouping-icon.vue","path":"src/drop-down-list/grouping-icon.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029291","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"data-binding","name":"Data Binding","category":"Dropdown List","description":"This example demonstrates how to bind with local data source and fetch data from remote data service in the Vue drop-down list component.","sourceFiles":[{"displayName":"data-binding.vue","path":"src/drop-down-list/data-binding.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029292","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"template","name":"Template","category":"Dropdown List","description":"This example demonstrates how to customize the appearance of each item in the Vue drop-down list component pop-up list using the template.","sourceFiles":[{"displayName":"template.vue","path":"src/drop-down-list/template.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029293","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"filtering","name":"Filtering","category":"Dropdown List","description":"This example demonstrates how the filtering functionalities works based on the typed characters in the Vue drop-down list component.","sourceFiles":[{"displayName":"filtering.vue","path":"src/drop-down-list/filtering.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029294","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"cascading","name":"Cascading","category":"Dropdown List","description":"This example demonstrates how to create a related drop-down list (Cascading DropDownList) using the Vue drop-down list component.","sourceFiles":[{"displayName":"cascading.vue","path":"src/drop-down-list/cascading.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029295","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"inline","name":"Inline","category":"Dropdown List","description":"This example demonstrates how to render the Vue drop-down list component in line with highlighted contents.","sourceFiles":[{"displayName":"inline.vue","path":"src/drop-down-list/inline.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029296","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"diacritics-filtering","name":"Diacritics Filtering","category":"Dropdown List","description":"This example demonstrates how to achieve the diacritics filter functionalities in the Vue drop-down list component.","sourceFiles":[{"displayName":"diacritics-filtering.vue","path":"src/drop-down-list/diacritics-filtering.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029297","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"},{"url":"two-way-binding","name":"Two-way Binding","type":"new","category":"Dropdown List","description":"The Vue Dropdown List component supports two-way data binding using the v-model attribute of Vue directive. It helps to achieve in sync with data in the DOM.","sourceFiles":[{"displayName":"two-way.vue","path":"src/drop-down-list/two-way-binding.vue"},{"displayName":"dataSource.json","path":"src/drop-down-list/dataSource.json"}],"uid":"0029298","order":0,"component":"Dropdown List","dir":"drop-down-list","parentId":"029"}],"order":4,"uid":"029"},{"name":"MultiSelect Dropdown","directory":"multi-select","type":"update","category":"Dropdowns","samples":[{"url":"default","name":"Default Functionalities","category":"MultiSelect Dropdown","description":"This example demonstrates the default functionalities of the Vue multiselect component with minimum configuration.","sourceFiles":[{"displayName":"default.vue","path":"src/multi-select/default.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030300","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"data-binding","name":"Data Binding","category":"MultiSelect Dropdown","description":"This example demonstrates how to bind with local data source and fetch data from remote data service in the Vue multiselect component.","sourceFiles":[{"displayName":"data-binding.vue","path":"src/multi-select/data-binding.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030301","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"grouping-icon","name":"Grouping","category":"MultiSelect Dropdown","description":"This example demonstrates how to group based on the different categories with individual header and icon support using the Vue multiselect component.","sourceFiles":[{"displayName":"grouping-icon.vue","path":"src/multi-select/grouping-icon.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030302","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"template","name":"Template","category":"MultiSelect Dropdown","description":"This example demonstrates how to customize the appearance of each item in the Vue multiselect component pop-up list using the template.","sourceFiles":[{"displayName":"template.vue","path":"src/multi-select/template.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030303","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"filtering","name":"Filtering","category":"MultiSelect Dropdown","description":"This example demonstrates how the filtering functionalities works based on the typed characters in the Vue multiselect component.","sourceFiles":[{"displayName":"filtering.vue","path":"src/multi-select/filtering.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030304","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"custom-value","name":"Custom Value","category":"MultiSelect Dropdown","description":"This example demonstrates the addition of a new value that is not present in the predefined list of the Vue multiselect component.","sourceFiles":[{"displayName":"custom-value.vue","path":"src/multi-select/custom-value.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030305","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"chip-customization","name":"Chip Customization","category":"MultiSelect Dropdown","description":"This example demonstrates how to customize the appearance of the selected chip element in the Vue multiselect component.","sourceFiles":[{"displayName":"chip-customization.vue","path":"src/multi-select/chip-customization.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030306","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"checkbox","name":"CheckBox","category":"MultiSelect Dropdown","description":"This example demonstrates how to select the multiple values through checkbox in the Vue multiselect component.","sourceFiles":[{"displayName":"checkbox.vue","path":"src/multi-select/checkbox.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030307","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"grouping-with-checkbox","name":"Grouping with CheckBox","type":"new","category":"MultiSelect Dropdown","description":"This example demonstrates how to select all the grouped list item values through checkbox in the Vue MultiSelect component.","sourceFiles":[{"displayName":"grouping-with-checkbox.vue","path":"src/multi-select/grouping-with-checkbox.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030308","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"selection-limit","name":"Selection Limit","category":"MultiSelect Dropdown","description":"This example demonstrates the maximum selection limit functionalities with checkbox of the Vue multiselect component.","sourceFiles":[{"displayName":"selection-limit.vue","path":"src/multi-select/selection-limit.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"0030309","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"diacritics-filtering","name":"Diacritics Filtering","category":"MultiSelect Dropdown","description":"This example demonstrates how to achieve the diacritics filter functionalities in the Vue multiselect component.","sourceFiles":[{"displayName":"diacritics-filtering.vue","path":"src/multi-select/diacritics-filtering.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"00303010","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"},{"url":"two-way-binding","name":"Two-way Binding","type":"new","category":"MultiSelect Dropdown","description":"The Vue Multiselect component supports two-way data binding using the v-model attribute of Vue directive. It helps to achieve in sync with data in the DOM.","sourceFiles":[{"displayName":"two-way.vue","path":"src/multi-select/two-way-binding.vue"},{"displayName":"dataSource.json","path":"src/multi-select/dataSource.json"}],"uid":"00303011","order":0,"component":"MultiSelect Dropdown","dir":"multi-select","parentId":"030"}],"order":4,"uid":"030"},{"name":"List Box","directory":"list-box","category":"Dropdowns","ftName":"list-box","samples":[{"url":"default","name":"Default Functionalities","description":"This example demonstrates the default functionalities of Syncfusion TypeScript ListBox component with minimum configuration.","category":"List Box","api":{"ListBox":["dataSource"]},"uid":"0031310","order":0,"component":"List Box","dir":"list-box","parentId":"031"},{"url":"dual-list-box","name":"Dual ListBox","description":"This example demonstrates how to move items between the two list boxes using dual list box functionality.","category":"List Box","api":{"ListBox":["dataSource","fields","scope","toolbarSettings","height"]},"uid":"0031311","order":0,"component":"List Box","dir":"list-box","parentId":"031"},{"url":"drag-and-drop","name":"Drag And Drop","description":"This example demonstrates how to drag and drop within the Syncfusion TypeScript ListBox and between two list boxes.","category":"List Box","api":{"ListBox":["dataSource","scope","allowDragAndDrop","fields","height"]},"uid":"0031312","order":0,"component":"List Box","dir":"list-box","parentId":"031"},{"url":"checkbox","name":"Checkbox","description":"This example demonstrates how to select multiple items from the Syncfusion TypeScript ListBox using checkbox functionality.","category":"List Box","api":{"ListBox":["dataSource","selectionSettings"]},"uid":"0031313","order":0,"component":"List Box","dir":"list-box","parentId":"031"},{"url":"api","name":"API","description":"This example how to customize the Syncfusion Typescript ListBox component using the available set of APIs.","category":"List Box","api":{"ListBox":["dataSource","fields","selectionSettings","sortOrder"]},"uid":"0031314","order":0,"component":"List Box","dir":"list-box","parentId":"031"}],"order":4,"uid":"031"},{"name":"Accordion","directory":"accordion","category":"Navigation","ftName":"accordion","samples":[{"url":"default","name":"Default Functionalities","category":"Accordion","description":"The sample demonstrates that default functionalities of the Accordion component which works by expand and collapse action in Vue platform.","api":{"Accordion":["header","content","expanded","items"]},"uid":"0032320","order":0,"component":"Accordion","dir":"accordion","parentId":"032"},{"url":"ajax","name":"Ajax Content","category":"Accordion","description":"The sample demonstrates how to load the content to the Accordion component from external sources using Ajax library in Vue platform.","api":{"Accordion":["expandMode","expanding"]},"uid":"0032321","order":0,"component":"Accordion","dir":"accordion","parentId":"032"},{"url":"icons","name":"Icons","category":"Accordion","description":"The sample demonstrates how to represent pane headers with an icon in Accordion component which populates from items collection in Vue platform.","api":{"Accordion":["iconCss"]},"uid":"0032322","order":0,"component":"Accordion","dir":"accordion","parentId":"032"}],"order":5,"uid":"032"},{"name":"Context Menu","directory":"context-menu","category":"Navigation","ftName":"context-menu","samples":[{"url":"default","name":"Default Functionalities","category":"Context Menu","api":{"ContextMenu":["target","items","beforeItemRender","animationSettings"],"MenuItem":["text","iconCss","items","separator"]},"description":"This example demonstrates the Syncfusion Vue ContextMenu items with icons, text and separator.","uid":"0033330","order":0,"component":"Context Menu","dir":"context-menu","parentId":"033"}],"order":5,"uid":"033"},{"name":"File Manager","directory":"file-manager","category":"Navigation","ftName":"file-manager","type":"update","samples":[{"url":"overview","name":"Overview","category":"File Manager","description":"This example demonstrates full view of the File Manager like a windows explorer UI  in a Vue File Manager","api":{"FileManager":["ajaxSettings","view"]},"uid":"0034340","order":0,"component":"File Manager","dir":"file-manager","parentId":"034"},{"url":"custom-thumbnail","name":"Custom Thumbnails","category":"File Manager","api":{"FileManager":["ajaxSettings"]},"description":"This example demonstrates how to use the custom thumbnails in a Vue File Manager.","uid":"0034341","order":0,"component":"File Manager","dir":"file-manager","parentId":"034"},{"url":"default","name":"API","category":"File Manager","api":{"FileManager":["ajaxSettings","view"]},"description":"This example demonstrates how to render the File Manager without the navigation pane in a Vue File Manager.","uid":"0034342","order":0,"component":"File Manager","dir":"file-manager","parentId":"034"},{"url":"drag-drop","name":"Drag and Drop","category":"File Manager","type":"new","api":{"FileManager":["ajaxSettings","view"]},"description":"This example demonstrates how to drag and drop the files in a Vue File Manager.","uid":"0034343","order":0,"component":"File Manager","dir":"file-manager","parentId":"034"},{"url":"file-upload","name":"File Upload","category":"Use Case","type":"new","api":{"FileManager":["ajaxSettings","view"]},"description":"This example demonstrates how to render the File Manager component inside the Dialog component in a Vue File Manager.","uid":"0034344","order":1,"component":"File Manager","dir":"file-manager","parentId":"034"},{"url":"azure-service","name":"Azure Blob Provider","category":"Cloud Service Providers","type":"new","api":{"FileManager":["ajaxSettings","view"]},"description":"This example demonstrates how to configure and use the azure service in a Vue File Manager.","uid":"0034345","order":2,"component":"File Manager","dir":"file-manager","parentId":"034"},{"url":"sql-server-provider","name":"SQL Database Provider","category":"Cloud Service Providers","type":"new","api":{"FileManager":["ajaxSettings","view"]},"description":"This example demonstrates how to configure and use the sql server database service in a Vue File Manager.","uid":"0034346","order":2,"component":"File Manager","dir":"file-manager","parentId":"034"}],"order":5,"uid":"034"},{"name":"Menu Bar","directory":"menu","category":"Navigation","ftName":"menu-bar","samples":[{"url":"default","name":"Default Functionalities","category":"Menu Bar","description":"This example demonstrates the Syncfusion Vue Menu items with icons, text, separator and items submenu.","api":{"Menu":["items","orientation"],"MenuItem":["text","iconCss","items","separator"]},"uid":"0035350","order":0,"component":"Menu Bar","dir":"menu","parentId":"035"},{"url":"data-binding","name":"Data Binding","category":"Menu Bar","description":"This example demonstrates how to bind local data source with Syncfusion Vue Menu component.","api":{"Menu":["items"]},"uid":"0035351","order":0,"component":"Menu Bar","dir":"menu","parentId":"035"},{"url":"scrollable","name":"Scrollable","category":"Menu Bar","api":{"Menu":["items","enableScrolling","cssClass","beforeOpen"]},"description":"This example demonstrates how to load menu and sub menus with large number of menu items in horizontal / vertical scrollable Syncfusion Vue menu.","uid":"0035352","order":0,"component":"Menu Bar","dir":"menu","parentId":"035"},{"url":"template","name":"Template","category":"Menu Bar","api":{"Menu":["items","fields","template"],"FieldSettings":["text","children"]},"description":"This example demonstrates how to customize Syncfusion Javascript Menu popup items by using templates.","sourceFiles":[{"displayName":"template.vue","path":"src/menu/template.vue"},{"displayName":"template-data.json","path":"src/menu/template-data.json"}],"uid":"0035353","order":0,"component":"Menu Bar","dir":"menu","parentId":"035"},{"url":"hamburger-mode","name":"Hamburger Mode","category":"Menu Bar","api":{"Menu":["hamburgerMode","title"]},"description":"This example demonstrates the hamburger mode of the Syncfusion Vue Menu that enables the adaptive view.","uid":"0035354","order":0,"component":"Menu Bar","dir":"menu","parentId":"035"},{"url":"api","name":"API","category":"Menu Bar","api":{"Menu":["orientation","showItemOnClick","enableItems"]},"description":"This example demonstrates the supported API's and its functionalities of the Syncfusion Vue Menu.","uid":"0035355","order":0,"component":"Menu Bar","dir":"menu","parentId":"035"},{"url":"toolbar-integration","name":"Toolbar Integration","category":"Use Case","api":{"Menu":["items"]},"description":"This example demonstrates the real use case of the Syncfusion Vue Menu in web application. It is integrated with toolbar component.","uid":"0035356","order":1,"component":"Menu Bar","dir":"menu","parentId":"035"}],"order":5,"uid":"035"},{"name":"Sidebar","directory":"sidebar","category":"Navigation","samples":[{"url":"default","name":"Default Functionalities","category":"Sidebar","api":{"Sidebar":["type","position","showBackdrop","closeOnDocumentClick","change","mediaQuery"]},"description":"This example demonstrates a simple, mobile-friendly and responsive Vue Sidebar (Navigation drawer, Side navigation menu) to navigate between various parts of an application with ease","uid":"0036360","order":0,"component":"Sidebar","dir":"sidebar","parentId":"036"},{"url":"docking-sidebar","name":"Dock","category":"Sidebar","api":{"Sidebar":["enableDock","dockSize","contextTo"]},"description":"This example demonstrates how the Vue Sidebar is docked to the main content when it is in closed state","uid":"0036361","order":0,"component":"Sidebar","dir":"sidebar","parentId":"036"},{"url":"api","name":"API","category":"Sidebar","api":{"Sidebar":["showBackdrop","position","types","closeOnDocumentClick"]},"description":"This example demonstrates how to change the behavior and appearance of the Vue sidebar based on application through user friendly API’s like types, position, auto close and backdrop","uid":"0036362","order":0,"component":"Sidebar","dir":"sidebar","parentId":"036"},{"url":"sidebar-menu","name":"Sidebar Menu","category":"Sidebar","api":{"Sidebar":["width","mediaQuery","target","dockSize","enableDock"]},"description":"This example demonstrates how to render Menu for navigation purpose inside the Vue Sidebar","uid":"0036363","order":0,"component":"Sidebar","dir":"sidebar","parentId":"036"},{"url":"responsive-panel","name":"Responsive Panel","category":"Sidebar","api":{"Sidebar":["width","mediaQuery","target"]},"description":"This example demonstrates how to render TreeView for navigation purpose inside the Vue Sidebar","uid":"0036364","order":0,"component":"Sidebar","dir":"sidebar","parentId":"036"},{"url":"sidebar-list","name":"Sidebar With ListView","category":"Sidebar","api":{"Sidebar":["open","close"]},"description":"This example demonstrates how the Vue Sidebar is integrated with a ListView to display a list of menu items","uid":"0036365","order":0,"component":"Sidebar","dir":"sidebar","parentId":"036"}],"order":5,"uid":"036"},{"name":"Tabs","directory":"tab","category":"Navigation","ftName":"tabs","samples":[{"url":"default","name":"Default Functionalities","category":"Tabs","description":"The sample demonstrates about default functionalities of the Tab component (also known as Tabbed UI) which is navigation component in Vue platform.","api":{"Tab":["text","iconCss","content","items"]},"uid":"0037370","order":0,"component":"Tabs","dir":"tab","parentId":"037"},{"url":"orientation","name":"Orientation","category":"Tabs","description":"The sample demonstrates how to customize the orientation of Tab component along with feasibility to customize the Tab header styles in Vue platform.","api":{"Tab":["headerPlacement","showCloseButton"]},"uid":"0037371","order":0,"component":"Tabs","dir":"tab","parentId":"037"},{"url":"responsive","name":"Responsive Modes","category":"Tabs","description":"The sample illustrates that responsive mode of Tab component that aligns tab items in a scrollable or popup mode in Vue platform.","api":{"Tab":["overflowMode"]},"uid":"0037372","order":0,"component":"Tabs","dir":"tab","parentId":"037"},{"url":"wizard","name":"Wizard","category":"Tabs","description":"This sample demonstrates how to design a wizard-like application with the sequential action using the Tab component in Vue platform.","api":{"Tab":["disabled"]},"uid":"0037373","order":0,"component":"Tabs","dir":"tab","parentId":"037"}],"order":5,"uid":"037"},{"name":"Toolbar","directory":"toolbar","category":"Navigation","ftName":"toolbar","samples":[{"url":"default","name":"Default Functionalities","category":"Toolbar","description":"The sample demonstrates the default functionalities of the Toolbar component which place commands with the scrollable mode in Vue platform.","api":{"Toolbar":["text","prefixIcon","type","tooltipText","items"]},"uid":"0038380","order":0,"component":"Toolbar","dir":"toolbar","parentId":"038"},{"url":"popup","name":"Popup","category":"Toolbar","description":"The sample exposes popup mode of Toolbar component which configures overflowing toolbar commands inside a popup based on priority in Vue platform.","api":{"Toolbar":["showAlwaysInPopup","showTextOn","overflow","overflowMode"]},"uid":"0038381","order":0,"component":"Toolbar","dir":"toolbar","parentId":"038"},{"url":"alignment","name":"Alignment","category":"Toolbar","description":"This sample demonstrates how to align commands in left, right and center position in Toolbar component in Vue platform.","api":{"Toolbar":["align"]},"uid":"0038382","order":0,"component":"Toolbar","dir":"toolbar","parentId":"038"}],"order":5,"uid":"038"},{"name":"TreeView","directory":"treeview","category":"Navigation","ftName":"treeview","samples":[{"url":"default","name":"Default Functionalities","category":"TreeView","description":"This demo demonstrates the basic tree view component that display the data in a hierarchical structure with the configuration options.","sourceFiles":[{"displayName":"default.vue","path":"src/treeview/default.vue"},{"displayName":"default-data.json","path":"src/treeview/dataSource/default-data.json"}],"uid":"0039390","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"icons","name":"Icons and Images","category":"TreeView","description":"The tree view nodes can be rendered with any custom icons. This sample demonstrated like a file system with custom icons and images.","sourceFiles":[{"displayName":"icons.vue","path":"src/treeview/icons.vue"},{"displayName":"icons-data.json","path":"src/treeview/dataSource/icons-data.json"}],"uid":"0039391","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"check-box","name":"CheckBox","category":"TreeView","description":"This demo demonstrates the tree view with checkbox functionality, this allows the user to check more than one tree nodes.","sourceFiles":[{"displayName":"check-box.vue","path":"src/treeview/check-box.vue"},{"displayName":"checkbox-data.json","path":"src/treeview/dataSource/checkbox-data.json"}],"uid":"0039392","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"node-editing","name":"Node Editing","category":"TreeView","description":"This demo showcases the node editing functionality of tree view, you can edit any node text by double click on it or pressing F2.","sourceFiles":[{"displayName":"node-editing.vue","path":"src/treeview/node-editing.vue"},{"displayName":"nodeEdit-data.json","path":"src/treeview/dataSource/nodeEdit-data.json"}],"uid":"0039393","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"multiple-selection","name":"Multiple Selection","category":"TreeView","description":"The TreeView component allows to select multiple nodes by pressing CTRL key, also can select the range of nodes by pressing SHIFT key.","sourceFiles":[{"displayName":"multiple-selection.vue","path":"src/treeview/multiple-selection.vue"},{"displayName":"multiSelect-data.json","path":"src/treeview/dataSource/multiSelect-data.json"}],"uid":"0039394","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"drag-and-drop","name":"Drag and Drop","category":"TreeView","description":"The tree view nodes can be drag and drop from one position to another, also the drop can be done to another tree view or other external container.","sourceFiles":[{"displayName":"drag-and-drop.vue","path":"src/treeview/drag-and-drop.vue"},{"displayName":"drag-data.json","path":"src/treeview/dataSource/drag-data.json"}],"uid":"0039395","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"template","name":"Template","category":"TreeView","description":" The tree view node can be customized through the template option. In this demo the tree view nodes are templated like an mail system.","sourceFiles":[{"displayName":"template.vue","path":"src/treeview/template.vue"},{"displayName":"template-data.json","path":"src/treeview/dataSource/template-data.json"},{"displayName":"tree-template.vue","path":"src/treeview/tree-template.vue"}],"uid":"0039396","order":0,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"local-data","name":"Local Data","category":"Data Binding","description":"This demo demonstrates the binding of local data to the tree view. The local data structure can be hierarchical data or list data.","sourceFiles":[{"displayName":"local-data.vue","path":"src/treeview/local-data.vue"},{"displayName":"local-data.json","path":"src/treeview/dataSource/local-data.json"}],"uid":"0039397","order":1,"component":"TreeView","dir":"treeview","parentId":"039"},{"url":"remote-data","name":"Remote Data","category":"Data Binding","description":"This demo demonstrates the binding of data to the tree view from remote data source.","uid":"0039398","order":1,"component":"TreeView","dir":"treeview","parentId":"039"}],"order":5,"uid":"039"},{"name":"Badge","directory":"badge","category":"Notifications","ftName":"badge","samples":[{"url":"default","name":"Default","category":"Badge","description":"Demo of the pure CSS Essential JS 2 Badge component displaying a notification count in a group button.","uid":"0040400","order":0,"component":"Badge","dir":"badge","parentId":"040"},{"url":"types","name":"Types","category":"Badge","description":"Demo of the pure CSS Essential JS 2 Badge component's badge types: primary, secondary, success, danger, warning, info, light, and dark.","uid":"0040401","order":0,"component":"Badge","dir":"badge","parentId":"040"},{"url":"notification","name":"Notification","category":"Badge","description":"Demo of the pure CSS Essential JS 2 Badge component displaying notifications on popular social media logos such as Facebook, WhatsApp, Twitter, and others.","uid":"0040402","order":0,"component":"Badge","dir":"badge","parentId":"040"},{"url":"listview","name":"ListView","category":"Integration","description":"Demo integrating the Essential JS 2 Badge and ListView components to display a notification count in a list item to achieve a Gmail-like user interface.","uid":"0040403","order":1,"component":"Badge","dir":"badge","parentId":"040"},{"url":"accordion","name":"Accordion","category":"Integration","description":"Demo integrating the Essential JS 2 Badge and Accordion components to display an unread notification count in a header to achieve an Outlook-like user interface","uid":"0040404","order":1,"component":"Badge","dir":"badge","parentId":"040"},{"url":"toolbar","name":"Toolbar","category":"Integration","description":"Demo integrating the Essential JS 2 Badge and ToolBar components to display important information in a mobile application header.","uid":"0040405","order":1,"component":"Badge","dir":"badge","parentId":"040"}],"order":6,"uid":"040"},{"name":"Toast","directory":"toast","category":"Notifications","ftName":"toast","samples":[{"url":"default","name":"Default Functionalities","category":"Toast","description":"The sample demonstrates about default functionalities of a Toast component and helps to design reminder like an alert in Vue platform.","uid":"0041410","order":0,"component":"Toast","dir":"toast","parentId":"041"},{"url":"types","name":"Types","category":"Toast","description":"The sample demonstrates how to design success, warning, information, and error messages using Toast component based on CSS classes in Vue platform.","uid":"0041411","order":0,"component":"Toast","dir":"toast","parentId":"041"},{"url":"template","name":"Template","category":"Toast","description":"The sample demonstrates how to design a reminder application by customizing the content of Toast component using an HTML template in Vue platform.","uid":"0041412","order":0,"component":"Toast","dir":"toast","parentId":"041"},{"url":"positions","name":"Positions","category":"Toast","description":"The sample demonstrates how to display the toast notification with various built-in or custom position based on target or page in Vue platform.","uid":"0041413","order":0,"component":"Toast","dir":"toast","parentId":"041"},{"url":"api","name":"API","category":"Toast","description":"The sample exposes the available properties, methods, and events of Toast component which helps to create flexible toast notification in Vue platform.","uid":"0041414","order":0,"component":"Toast","dir":"toast","parentId":"041"}],"order":6,"uid":"041"},{"name":"TextBox","directory":"textboxes","category":"Inputs","ftName":"textbox","samples":[{"url":"default","name":"Default Functionalities","category":"TextBox","description":"The example describes key features of Vue textbox such as a floating label, input group, placeholder, validation states, sizing, types, and more.","uid":"0042420","order":0,"component":"TextBox","dir":"textboxes","parentId":"042"},{"url":"multiline","name":"Multiline TextBox","category":"TextBox","description":"The example exposes a Vue Multiline TextBox (textarea). It helps to render address, feedback, and more in a form with customizable rows and columns.","uid":"0042421","order":0,"component":"TextBox","dir":"textboxes","parentId":"042"},{"url":"two-way-binding","name":"Two-way Binding","category":"TextBox","description":"The Vue TextBox component supports two-way data binding using the v-model attribute of Vue directive. It helps to achieve sync with data in the DOM.","uid":"0042422","order":0,"component":"TextBox","dir":"textboxes","parentId":"042"}],"order":7,"uid":"042"},{"name":"Input Mask","directory":"maskedtextbox","category":"Inputs","ftName":"maskedtextbox","samples":[{"url":"default","name":"Default Functionalities","category":"Input Mask","description":"The Masked Textbox allows users to enter only the valid input based on the provided mask format such as Phone number, Country ISO code, Date, Time and so on.","uid":"0043430","order":0,"component":"Input Mask","dir":"maskedtextbox","parentId":"043"},{"url":"custom-mask","name":"Custom Mask","category":"Input Mask","description":"The custom mask is done using custom characters as mask elements. Time format and IP address fields are achieved using the custom mask literals and regex.","uid":"0043431","order":0,"component":"Input Mask","dir":"maskedtextbox","parentId":"043"},{"url":"formats","name":"Formats","category":"Input Mask","description":"This sample demonstrates the usage of different mask formats through the properties panel. You can also get the value and raw value of the masked textbox.","uid":"0043432","order":0,"component":"Input Mask","dir":"maskedtextbox","parentId":"043"},{"url":"two-way","name":"Two-Way Binding","category":"Input Mask","description":"This sample demonstrates the two way bindig in masked textbox. when you change the value in one masked textbox component, it will update in the other masked textbox by using value property.","uid":"0043433","order":0,"component":"Input Mask","dir":"maskedtextbox","parentId":"043"}],"order":7,"uid":"043"},{"name":"Numeric Textbox","directory":"numerictextbox","category":"Inputs","ftName":"numerictextbox","samples":[{"url":"default","name":"Default Functionalities","category":"Numeric Textbox","description":"The NumericTextBox is used to get the numbered inputs from the users and the currency and percentage text boxes to get the currency and percentage inputs.","uid":"0044440","order":0,"component":"Numeric Textbox","dir":"numerictextbox","parentId":"044"},{"url":"range-validation","name":"Range Validation","category":"Numeric Textbox","description":"The NumericTextBox has options to restrict the input value between a specific range using min, max, and strictMode properties.","uid":"0044441","order":0,"component":"Numeric Textbox","dir":"numerictextbox","parentId":"044"},{"url":"custom-format","name":"Custom Format","category":"Numeric Textbox","description":"The NumericTextBox provides an option to customize the display format of the numeric value using the format property.","uid":"0044442","order":0,"component":"Numeric Textbox","dir":"numerictextbox","parentId":"044"},{"url":"restrict-decimals","name":"Restrict Decimals","category":"Numeric Textbox","description":"The NumericTextBox provides an option to restrict the number of decimal values, by using the decimals property. So, it can only accept the integer value alone.","uid":"0044443","order":0,"component":"Numeric Textbox","dir":"numerictextbox","parentId":"044"},{"url":"two-way","name":"Two-Way Binding","category":"Numeric Textbox","description":"This sample demonstrates the two way bindig in numeric textbox. when you change the value in one numeric textbox component, it will update in the other numeric textbox by using value property.","uid":"0044444","order":0,"component":"Numeric Textbox","dir":"numerictextbox","parentId":"044"}],"order":7,"uid":"044"},{"name":"Color Picker","directory":"color-picker","category":"Inputs","ftName":"color-picker","samples":[{"url":"default","name":"Default Functionalities","category":"Color Picker","api":{"ColorPicker":["value","mode","modeSwitcher","disabled"]},"description":"This example demonstrates the default functionalities of the Syncfusion Vue ColorPicker with RGB, HSV and Hex codes(three, six and eight digit).","uid":"0045450","order":0,"component":"Color Picker","dir":"color-picker","parentId":"045"},{"url":"inline","name":"Inline Mode","category":"Color Picker","api":{"ColorPicker":["value","mode","modeSwitcher","inline","disabled"]},"description":"This example demonstrates the inline / flat mode rendering of the Syncfusion Vue ColorPicker with hue and opacity color options.","uid":"0045451","order":0,"component":"Color Picker","dir":"color-picker","parentId":"045"},{"url":"custom","name":"Custom Palettes","category":"Color Picker","api":{"ColorPicker":["value","mode","modeSwitcher","inline","disabled","presetColors"]},"description":"This example demonstrates the Syncfusion Vue ColorPicker, custom UI of the color palette with different structures and its state.","uid":"0045452","order":0,"component":"Color Picker","dir":"color-picker","parentId":"045"},{"url":"api","name":"API","category":"Color Picker","api":{"ColorPicker":["value","mode","modeSwitcher","showButtons","disabled"]},"description":"This example demonstrates the supported API's and its functionalities of the Syncfusion Vue ColorPicker.","uid":"0045453","order":0,"component":"Color Picker","dir":"color-picker","parentId":"045"}],"order":7,"uid":"045"},{"name":"File Upload","directory":"uploader","category":"Inputs","ftName":"file-upload","samples":[{"url":"default","name":"Default Functionalities","category":"File Upload","description":"This example demonstrates default functionalities of the Vue file uploader component, including automatic upload and asynchronous mode options.","api":{"Uploader":["asyncSettings","dropArea"]},"sourceFiles":[{"displayName":"default.vue","path":"src/uploader/default.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046460","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"chunk-upload","name":"Chunk Upload","category":"File Upload","description":"This example demonstrates how to upload files as chunks in the Vue file upload component, which helps when uploading a large file to a server.","api":{"Uploader":["asyncSettings","dropArea"]},"sourceFiles":[{"displayName":"chunk-upload.vue","path":"src/uploader/chunk-upload.vue"},{"displayName":"save file","path":"src/uploader/chunk-upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/chunk-upload-remove-file.cs"}],"uid":"0046461","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"custom-file-list","name":"Template","category":"File Upload","description":"This example demonstrates how to customize the file list with buttons using a template and upload a file programmatically using the Vue file upload.","api":{"Uploader":["asyncSettings","dropArea","selected","progress","success","failure"]},"sourceFiles":[{"displayName":"custom-file-list.vue","path":"src/uploader/custom-file-list.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046462","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"preload-files","name":"Preload Files","category":"File Upload","description":"This example demonstrates how to preload files in the Vue file upload component, which helps users view and manipulate server files.","api":{"Uploader":["asyncSettings","files","dropArea"]},"sourceFiles":[{"displayName":"preload-files.vue","path":"src/uploader/preload-files.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046463","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"file-validation","name":"File Validation","category":"File Upload","description":"The example covers validations in Vue file upload such as allowing/denying file extensions, set min/max file size, duplicate file, and more.","api":{"Uploader":["asyncSettings","allowedExtensions","dropArea","minFileSize","maxFileSize","selected"]},"sourceFiles":[{"displayName":"file-validation.vue","path":"src/uploader/file-validation.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046464","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"image-preview","name":"Image Preview","category":"File Upload","description":"This example demonstrates how to display a preview of an image file before and after uploading it to a server in Vue file upload.","api":{"Uploader":["asyncSettings","allowedExtensions","dropArea","selected","progress","success","failure"]},"sourceFiles":[{"displayName":"image-preview.vue","path":"src/uploader/image-preview.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046465","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"file-upload-with-forms","name":"Form Support","category":"File Upload","description":"This example demonstrates how to integrate the Vue file upload control in an HTML form (synchronous mode) and submit a form with selected files.","api":{"Uploader":["dropArea","autoUpload","allowedExtensions","selected"]},"sourceFiles":[{"displayName":"file-upload-with-forms.vue","path":"src/uploader/file-upload-with-forms.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046466","order":0,"component":"File Upload","dir":"uploader","parentId":"046"},{"url":"custom-drop-area","name":"Custom Drop Area","category":"File Upload","description":"This example demonstrates how to upload a file using drag and drop and how to configure a custom drop area for the Vue file upload component.","api":{"Uploader":["asyncSettings","dropArea","template","allowedExtensions","success","failure","selected","progress"]},"sourceFiles":[{"displayName":"custom-drop-area.vue","path":"src/uploader/custom-drop-area.vue"},{"displayName":"save file","path":"src/uploader/upload-save-file.cs"},{"displayName":"remove file","path":"src/uploader/upload-remove-file.cs"}],"uid":"0046467","order":0,"component":"File Upload","dir":"uploader","parentId":"046"}],"order":7,"uid":"046"},{"name":"Range Slider","directory":"slider","category":"Inputs","ftName":"slider","samples":[{"url":"default","name":"Default Functionalities","category":"Range Slider","description":"Essential JS 2 slider control demo showing the default rendering of default, minimum range, and range sliders. Drag the thumb to interact with the slider.","uid":"0047470","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"ticks","name":"Ticks","category":"Range Slider","description":"Essential JS 2 slider control demo of the visual representation of slider values using ticks, which can be placed before, after, or on both sides of the thumbs.","uid":"0047471","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"tooltip","name":"Tooltip","category":"Range Slider","description":"Essential JS 2 slider control demo of the visual representation of slider values using tooltips, which can be displayed before or after slider thumbs.","uid":"0047472","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"orientation","name":"Vertical  Orientation","category":"Range Slider","description":"Essential JS 2 slider control demo showing the vertical and horizontal orientation properties along with ticks and tooltips.","uid":"0047473","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"format","name":"Formatting","category":"Range Slider","description":"Demo of Essential JS 2 slider control value formatting with time, currency, and distance values that are also displayed in ticks and tooltips.","uid":"0047474","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"limits","name":"Limits","category":"Range Slider","description":"Essential JS 2 slider control demo of limiting the minimum, maximum, start, and end values. Also supports restricting handle movements.","uid":"0047475","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"api","name":"API","category":"Range Slider","description":"Essential JS 2 slider control demo showcasing the most frequently used API combinations, like orientation, minimum, maximum, value, step, and more.","uid":"0047476","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"events","name":"Events","category":"Range Slider","description":"Demo of the Essential JS 2 slider control's created, changing, and changed events. The events are traced in real time in a property panel.","uid":"0047477","order":0,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"thumb-customization","name":"Thumb","category":"Customization","description":"Demo of the Essential JS 2 slider control slider thumb customization with circle, oval, and custom image shapes.","uid":"0047478","order":1,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"bar-customization","name":"Bar","category":"Customization","description":"Demo of Essential JS 2 slider control slider bar customization with colors and height.","uid":"0047479","order":1,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"ticks-customization","name":"Ticks","category":"Customization","description":"Demo of Essential JS 2 slider control's highly customizable slider values using ticks and a legend.","uid":"00474710","order":1,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"tooltip-customization","name":"Tooltip","category":"Customization","description":"Demo of Essential JS 2 slider control customization of slider tooltip text and background color with formatted text values.","uid":"00474711","order":1,"component":"Range Slider","dir":"slider","parentId":"047"},{"url":"azure-pricing","name":"Cloud Pricing","category":"Use Case","description":"Essential JS 2 slider control demo of real-world scenario using sample Azure cloud pricing.","uid":"00474712","order":2,"component":"Range Slider","dir":"slider","parentId":"047"}],"order":7,"uid":"047"},{"name":"Avatar","directory":"avatar","category":"Layout","ftName":"avatar","samples":[{"url":"default","name":"Default","category":"Avatar","description":"Demo of the pure CSS Essential JS 2 Avatar component displaying profile images in different sizes in both default and circle shapes.","uid":"0048480","order":0,"component":"Avatar","dir":"avatar","parentId":"048"},{"url":"types","name":"Types","category":"Avatar","description":"Demo of the pure CSS Essential JS 2 Avatar component's supported media formats for avatar content: images, SVG, initials, font icons, and words.","uid":"0048481","order":0,"component":"Avatar","dir":"avatar","parentId":"048"},{"url":"listview","name":"Listview","category":"Integration","description":"Demo integrating the Essential JS 2 Avatar and ListView components to display profile images or letters in a mobile contact application.","uid":"0048482","order":1,"component":"Avatar","dir":"avatar","parentId":"048"},{"url":"badge","name":"Badge","category":"Integration","description":"Demo integrating the Essential JS 2 Avatar and Badge components to display a notification count on profile images, similar to Gmail.","uid":"0048483","order":1,"component":"Avatar","dir":"avatar","parentId":"048"},{"url":"card","name":"Card","category":"Integration","description":"Demo integrating the Essential JS 2 Avatar and Card components to display business cards for employees with profile images, roles, and responsibilities.","uid":"0048484","order":1,"component":"Avatar","dir":"avatar","parentId":"048"}],"order":8,"uid":"048"},{"name":"Card","directory":"card","category":"Layout","ftName":"card","samples":[{"url":"basic","name":"Basic Card","category":"Card","description":"The sample demonstrates how to design basic card and weather layout card in Vue platform. The component is pure CSS component and more flexible.","uid":"0049490","order":0,"component":"Card","dir":"card","parentId":"049"},{"url":"vertical","name":"Vertical Card","category":"Card","description":"The sample demonstrates how to design a business card and profile card using a vertical layout of card component in Vue platform.","uid":"0049491","order":0,"component":"Card","dir":"card","parentId":"049"},{"url":"horizontal","name":"Horizontal Card","category":"Card","description":"The sample demonstrates how to design product card with icon and its specification using horizontal layout in card component in Vue platform.","uid":"0049492","order":0,"component":"Card","dir":"card","parentId":"049"},{"url":"swipeable","name":"Swipeable Card","category":"Card","description":"The sample demonstrates how to design a stacked card with swipeable action and corresponding images using card component in Vue platform.","uid":"0049493","order":0,"component":"Card","dir":"card","parentId":"049"},{"url":"flip","name":"Flip Card","category":"Card","description":"The sample demonstrates how to achieve flip behavior to the card to show hidden information which is on a back side on the card in Vue platform.","uid":"0049494","order":0,"component":"Card","dir":"card","parentId":"049"},{"url":"reveal","name":"Reveal Card","category":"Card","description":"The sample demonstrates how to render a card with reveal layouts, hidden information can be revealed while action on “Know more” in Vue platform.","uid":"0049495","order":0,"component":"Card","dir":"card","parentId":"049"},{"url":"tile","name":"Tile View","category":"Card","description":"The sample demonstrates how to design tile-view with filtering and searching using a template engine, data manager, and card component in Vue platform.","uid":"0049496","order":0,"component":"Card","dir":"card","parentId":"049"}],"order":8,"uid":"049"},{"name":"Dashboard Layout","directory":"dashboard-layout","category":"Layout","samples":[{"url":"default","name":"Default Functionalities","category":"Dashboard Layout","uid":"0050500","order":0,"component":"Dashboard Layout","dir":"dashboard-layout","parentId":"050"},{"url":"predefinedlayouts","name":"Predefined Layouts","category":"Dashboard Layout","uid":"0050501","order":0,"component":"Dashboard Layout","dir":"dashboard-layout","parentId":"050"},{"url":"api","name":"API","category":"Dashboard Layout","uid":"0050502","order":0,"component":"Dashboard Layout","dir":"dashboard-layout","parentId":"050"},{"url":"dynamic","name":"Editable Dashboard","category":"Dashboard Layout","sourceFiles":[{"displayName":"dynamic.vue","path":"./src/dashboard-layout/dynamic.vue"},{"displayName":"linetemplate.vue","path":"./src/dashboard-layout/linetemplate.vue"},{"displayName":"pietemplate.vue","path":"./src/dashboard-layout/pietemplate.vue"},{"displayName":"splinetemplate.vue","path":"./src/dashboard-layout/splinetemplate.vue"}],"uid":"0050503","order":0,"component":"Dashboard Layout","dir":"dashboard-layout","parentId":"050"},{"url":"seodashboard","name":"SEO Analytics Dashboard","category":"Use Case","sourceFiles":[{"displayName":"seodashboard.vue","path":"./src/dashboard-layout/seodashboard.vue"},{"displayName":"linetemplate.vue","path":"./src/dashboard-layout/linetemplate.vue"},{"displayName":"usage.vue","path":"./src/dashboard-layout/useage.vue"},{"displayName":"maptemplate.vue","path":"./src/dashboard-layout/map.vue"},{"displayName":"activeVisitors.vue","path":"./src/dashboard-layout/activeVisitors.vue"},{"displayName":"splinetemplate.vue","path":"./src/dashboard-layout/splinetemplate.vue"}],"uid":"0050504","order":1,"component":"Dashboard Layout","dir":"dashboard-layout","parentId":"050"}],"order":8,"uid":"050"},{"name":"Dialog","directory":"dialog","category":"Layout","ftName":"modal-dialog","samples":[{"url":"default","name":"Default Functionalities","category":"Dialog","description":"The example demonstrates the default rendering of the Vue dialog, which supports modal and non-modal (modeless), built-in buttons, and more.","uid":"0051510","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"custom-dialog","name":"Custom Dialogs","category":"Dialog","description":"This example demonstrates how to create custom dialogs such as alert dialogs, confirmation dialogs, and prompt dialogs using the Vue dialog component.","uid":"0051511","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"modal-dialog","name":"Modal","category":"Dialog","description":"This example demonstrates the modal pop-up behavior of the Vue dialog component, which helps display critical information such as errors and warnings.","uid":"0051512","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"template","name":"Template","category":"Dialog","description":"This example demonstrates how to customize user interface elements like the header, footer, and content of the Vue dialog component using a template.","uid":"0051513","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"dialog-contents-via-ajax","name":"Ajax","category":"Dialog","description":"The example demonstrates how to load the content of the Vue dialog component from external sources such as a file or website using Ajax library.","uid":"0051514","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"draggable","name":"Draggable","category":"Dialog","description":"This example shows how to enable drag-and-drop actions in the Vue dialog component to help reposition the dialog efficiently.","uid":"0051515","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"resizable","name":"Resizable","category":"Dialog","description":"This example shows how to create resizable modal in the Vue dialog to change the size of a dialog efficiently and view its content more comfortably.","uid":"0051516","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"position","name":"Positioning","category":"Dialog","description":"This example demonstrates how to display the Vue dialog component at various built-in and custom positions.","uid":"0051517","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"animation","name":"Animation","category":"Dialog","description":"This example demonstrates how to open or close the Vue dialog with various animation effects, and how to customize the animation duration and delay.","uid":"0051518","order":0,"component":"Dialog","dir":"dialog","parentId":"051"},{"url":"multiple-dialogs","name":"Multiple Dialogs","category":"Dialog","description":"This example shows how to display multiple dialogs sequentially and open multiple dialogs simultaneously for both modal and modeless Vue dialogs.","uid":"0051519","order":0,"component":"Dialog","dir":"dialog","parentId":"051"}],"order":8,"uid":"051"},{"name":"ListView","directory":"listview","category":"Layout","ftName":"listview","samples":[{"url":"default","name":"Default Functionalities","category":"ListView","description":"Demo of Essential JS 2 ListView control default renderings of flat and group list views. Click any list item to select and highlight it.","uid":"0052520","order":0,"component":"ListView","dir":"listview","parentId":"052"},{"url":"remote-list","name":"Remote List","category":"ListView","description":"Demo of Essential JS 2 ListView control rendering the list view with remote data, which uses DataManager and query properties to fetch data.","uid":"0052521","order":0,"component":"ListView","dir":"listview","parentId":"052"},{"url":"checklist","name":"Checklist","category":"ListView","description":"Essential JS 2 ListView control demo of the checked list view, which supports selecting more than one list item.","uid":"0052522","order":0,"component":"ListView","dir":"listview","parentId":"052"},{"url":"nested-list","name":"Nested List","category":"ListView","description":"Demo of Essential JS 2 ListView control showing the visual representation of nested data using the child property.","uid":"0052523","order":0,"component":"ListView","dir":"listview","parentId":"052"},{"url":"virtualization","name":"Virtualization","category":"ListView","description":"Demo of Essential JS 2 ListView control loading items in the view port with virtualization, which improves performance when loading large amounts of data.","uid":"0052524","order":0,"component":"ListView","dir":"listview","parentId":"052"},{"url":"template","name":"Template","category":"Customization","description":"Demo of Essential JS 2 ListView control rendering customized elements inside list items. This sample is a news feed application built using a list view.","uid":"0052525","order":1,"component":"ListView","dir":"listview","parentId":"052"},{"url":"group-template","name":"Group Template","category":"Customization","description":"Essential JS 2 ListView control demo of list item and header customization using a template. The mobile settings showcase built-in CSS.","uid":"0052526","order":1,"component":"ListView","dir":"listview","parentId":"052"},{"url":"call-history","name":"Call History","category":"Use Case","description":"Demo of Essential JS 2 ListView control in a real-world use case as a call history app, featuring mobile contacts, mail inbox, and more.","uid":"0052527","order":2,"component":"ListView","dir":"listview","parentId":"052"}],"order":8,"uid":"052"},{"name":"Tooltip","directory":"tooltip","category":"Layout","ftName":"tooltip","samples":[{"url":"default","name":"Default Functionalities","category":"Tooltip","description":"Default rendering of the Essential JS 2 Tooltip control, which will open when hovering or tapping and holding, and can be displayed in 12 different positions.","uid":"0053530","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"},{"url":"template","name":"Template","category":"Tooltip","description":"Demo of the Essential JS 2 Tooltip control template functionality, which allows HTML content to be rendered in tooltips.","uid":"0053531","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"},{"url":"ajax-content","name":"Ajax Content","category":"Tooltip","description":"Demo of the Essential JS 2 Tooltip control loading dynamic content in tooltips through Ajax from JSON files.","uid":"0053532","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"},{"url":"smart-position","name":"Smart Position","category":"Tooltip","description":"Demo of the Essential JS 2 Tooltip control's smart (flexible) positioning based on the view port's dimensions.","uid":"0053533","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"},{"url":"tooltip-menu","name":"Tooltip menu","category":"Tooltip","description":"Demo of Essential JS 2 Tooltip control customization to look like a menu.","uid":"0053534","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"},{"url":"html-template","name":"HTML Content","category":"Tooltip","description":"Demo of Essential JS 2 Tooltip control customization as an HTML page using HTML tags and CSS.","uid":"0053535","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"},{"url":"api","name":"API","category":"Tooltip","description":"Essential JS 2 Tooltip control demo showcasing the most frequently used API combinations, like content, height, width, open, sticky mode, and more.","uid":"0053536","order":0,"component":"Tooltip","dir":"tooltip","parentId":"053"}],"order":8,"uid":"053"},{"name":"Splitter","directory":"splitter","category":"Layout","ftName":"splitter","samples":[{"url":"default","name":"Default Functionalities","category":"Splitter","description":"The example explains the default functionalities of the Vue splitter with resizable panes, separator, and orientation (horizontal and vertical).","uid":"0054540","order":0,"component":"Splitter","dir":"splitter","parentId":"054"},{"url":"expand-and-collapse","name":"Expand and Collapse","category":"Splitter","description":"The example presents collapsible Splitter Component that exposes expand and collapse action of panes with a different orientation and resizable panes.","uid":"0054541","order":0,"component":"Splitter","dir":"splitter","parentId":"054"},{"url":"accordion-navigation-menu","name":"Accordion Navigation Menu","category":"Use Case","description":"The example shows how to integrate Accordion and load the content from external sources using the Ajax library inside panes of Vue Splitter.","uid":"0054542","order":1,"component":"Splitter","dir":"splitter","parentId":"054"},{"url":"details-view","name":"Details View","category":"Use Case","description":"The example demonstrates how to create employee details view layout using panes of Vue Splitter and ListView with navigation.","uid":"0054543","order":1,"component":"Splitter","dir":"splitter","parentId":"054"},{"url":"outlook-style-layout","name":"Outlook-style Layout","category":"Use Case","description":"The example explains how to construct an outlook style layout using Vue Splitter, TreeView, ListView, and Rich Text Editor with multiple panes.","uid":"0054544","order":1,"component":"Splitter","dir":"splitter","parentId":"054"},{"url":"code-editor-layout","name":"Code Editor Layout","category":"Use Case","description":"The example shows how to construct code editor layout (UI) using Vue Splitter with multiple, nested, different oriented, and resizable panes.","uid":"0054545","order":1,"component":"Splitter","dir":"splitter","parentId":"054"}],"order":8,"uid":"054"},{"name":"Query Builder","directory":"query-builder","category":"Forms","ftName":"query-builder","samples":[{"url":"default","name":"Default Functionalities","category":"Query Builder","description":"This sample demonstrates the default functionalities of the Query Builder component. Click the plus button to add group or rules.","api":{"QueryBuilder":["width","dataSource","columns","rule","created"]},"uid":"0055550","order":0,"component":"Query Builder","dir":"query-builder","parentId":"055"},{"url":"template","name":"Template","category":"Query Builder","api":{"QueryBuilder":["width","columns","rule","ruleChange"]},"description":"This sample demonstrates the integration of DropdownList, Slider controls as Templates in the Query Builder component.","uid":"0055551","order":0,"component":"Query Builder","dir":"query-builder","parentId":"055"},{"url":"grid","name":"Integration with Data Grid","category":"Query Builder","api":{"Query Builder":["width","dataSource","columns","rule","ruleChange"]},"description":"This sample demonstrates the integration of Grid component to showcase the data population based on the created filters using Query Builder component.","uid":"0055552","order":0,"component":"Query Builder","dir":"query-builder","parentId":"055"}],"order":9,"uid":"055"},{"name":"PDF Viewer","directory":"pdfviewer","category":"Viewer","type":"update","samples":[{"url":"default","name":"Default Functionalities","category":"PDF Viewer","type":"update","uid":"0056560","order":0,"component":"PDF Viewer","dir":"pdfviewer","parentId":"056"},{"url":"custom-toolbar","name":"Custom Toolbar","category":"PDF Viewer","uid":"0056561","order":0,"component":"PDF Viewer","dir":"pdfviewer","parentId":"056"},{"url":"right-to-left","name":"Right To Left","category":"PDF Viewer","uid":"0056562","order":0,"component":"PDF Viewer","dir":"pdfviewer","parentId":"056"}],"order":10,"uid":"056"}];

export let apiList:any={}

 export let skipCommonChunk: string[] = ["card"];